westciv downloadable courses
css level 2 sample section
z-index
In this section we learn a new CSS positioning property, z-index
. We also get to see a new value for the position
property: relative
.
If you make the window quite narrow and the text quite large, you may see an accessibility issue beginning to creep in. At some point the elements will always start to overlap one another. Wouldn't it be nice if we could control the order in which they overlap one another, so that we could make sure the most important information would always be at the front and therefore readable? Well, we can, using a new property with a kind of intimidating name: z-index
. I think z-index
would be a whole lot less intimidating if it was called "stacking order". It's value is simply a number which indicates the position of the element in the stacking order on the page.
Figure 24: a higher z-index brings an element closer to the top of the stacking order
Understanding and using this property is vital if you want to gain control over what happens when two elements overlap. The property can take the value of any whole number (positive or negative), including 0. The higher an element's z-index
, the closer it is to the front of the page, or the top, depending on how you see it. So with the following two elements
#orange-banner {
z-index: 0
}
#brown-column {
z-index: 1
}
insofar as they overlap, #brown-column
will be on top of #orange-banner
.
If you don't set an element's z-index
its position in the stacking order will be determined by its position in the HTML: elements further to the end of the HTML will be drawn on top of those closer to the beginning.
So z-index
is really quite straightforward, but there is one complicating factor, or at least it is a complication for us with the design we're working on here.
Relative positioning
Like the positioning properties
top
left
bottom
right
z-index
can only be applied to elements that also have a value set for the position
property. In a lot of designs this isn't a problem, because you would be working with absolute positioning. But in this instance we have specifically avoided doing this for <h1>
, #center
and #center-wide
. What to do? The solution is to give these three elements a value for position, but not the value absolute
.
Remember when we first learnt about the position
property we saw that it could take a number of values, most of which I told you not to worry about at the time. More recently we learnt about static positioning, and now, finally, we're going to learn about that last value relative
.
Figure 25: position: static
is the initial value
You should be getting to know static
, as we discussed it above. <h1>
, #center
and #center-wide
are in fact positioned statically at the moment, as this is the initial value for position
. This just means that they appear on the page according to their position in the flow of the HTML document, and this includes where they appear in the stacking order. Unfortunately just setting the value in the style sheet
position: static
doesn't seem to trigger acceptance of a value for z-index
in most browsers I have tried, so it's no use doing this. But there is a perfectly acceptable alternative. We can use that last position
value, relative
.
Figure 26: p#intro
positioned relatively
Giving an element
position: relative
means that any position coordinates you give that element will be relative to where the element would have appeared in the normal flow of the HTML. Look at what happens to p#intro
in Figure 26, compared to how it appears in Figure 25. At first this value seems confusing, but it actually does make sense if you think about it. Looking at Figure 26 you can see the usefulness of position: relative
. The topmost paragraph can easily be moved to a special position, and the paragraphs which follow it will simply move further down the page without being given any extra properties.
It also means that the element can then take a value for z-index
. In our case, there are no positioning coordinates for <h1>
, #center
or #center-wide
, so if we give them all a value for position
of relative
, they will stay exactly where they are now.
Exercise 39a
OK, let's put it into practice. First, give <h1>
, #center
and #center-wide
the position
property with the value of relative
.
Exercise 39b
Now, think about which of the five elements we want to be closest to the front - no matter what, this element will never be obscured. When you are trying to do this for a page, a good idea is to make a prioritized list of the elements. Then it's just a simple matter of giving each element a z-index
integer, with the highest number at the top of the list. I've decided that the information has this order of importance in terms of how I want it to be seen by a browser. Remember, this will have no impact at all on how the elements are interpreted by non-visual user agents.
#center
- 4#center-wide
- 3#left-column
- 2#right-column
- 1<h1>
- 0
Place the appropriate z-index
value in each of the rules.
Take a look in the browser now. If you've decided on the same z-index
values as I did, the upper text box will now be on top of the two navigation columns if we make them overlap by increasing the font size and making the window narrower.
Snapshot 32: Stacking order controlled
Here's what my code looks like, just giving #center
as an example.
#center {
...
position: relative;
z-index: 4;
}
Now I think this positioning exercise really is finished. Together with the other page layout exercises in this course, you've learnt enough to really get started using CSS positioning in your web pages. And most importantly you've learnt techniques that you can use with confidence knowing that they will degrade nicely in older browsers. Remember, there's more to CSS positioning than simply wanting to rigidly place an object on a web page. If you can embrace this idea with your designs you really will be on the way to creating the next generation of information architecture.
Are you ready to move on to the last section of the course? We have finished with positioning and we're going to take a look at using CSS to style forms.