In maths there where 3 axis which coordinates together point to a certain position. The x-axis, in css seen as left, the y-axis, top in css, and the z-axis, which would be the z-index in css. With the transparent png support of ie7, it will be much more common to position elements on top of eachother. A good example of that can be found here. The snowflakes are placed over the header, but under the content, and the menu. The fade-in fade-out effect is done with javascript. I made this effect while working for Connectholland.

Besides using it for something like the snowflakes, z-index can also be very useful when making a fold out menu.

div.container {
    position: relative;
    z-index : 2;
}

The standard z-index for an element is 0, and, how higher the z-index, the higher it is on the stack, so this div is placed on top of the rest of the page. Also, the container is positioned relative. For z-index to work an element has to be positioned. Since, if there is no x and y, why would there be z?

Problems with z-index

Unfortunately z-index doens’t always work as expected. Form elements like select boxes always show in Internet Explorer. As the z-index doesn’t apply to windowed controls. Before it also didn’t work with i-frames. Since ie 6 however also i-frames can be positioned.

And then there’s flash of course, since it uses a plugin it’s not part of the normal page content, and as such always displays on top of everything else. There are so good ways around this however, and Joshua clearly discribes one.

Related posts

This entry was posted on Tuesday, February 7th, 2006 at 11:58 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.