Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

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

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

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 default

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

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.