css level 2 sample section
In this section we learn a new CSS positioning property,
z-index. We also get to see a new value for the
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
insofar as they overlap,
#brown-column will be on top of
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.
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.
Like the positioning properties
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
#center-wide. What to do? The solution is to give these three elements a value for position, but not the value
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
position: static is the initial value
You should be getting to know
static, as we discussed it above.
#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
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
p#intro positioned relatively
Giving an element
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
#center-wide, so if we give them all a value for
relative, they will stay exactly where they are now.
OK, let's put it into practice. First, give
position property with the value of
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.
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.
Here's what my code looks like, just giving
#center as an example.
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.