CSS Positioning With Z-Index Tutorial
CSS Positioning Tutorial Main Page
CSS Nested DIVs & Floats Tutorial
CSS Affects on Element Size
CSS Visibility Tutorial
CSS Centering Tutorial
CSS Overflow Tutorial
Stylesheets and JavaScript
Now that you have seen the basics of CSS Positioning, you're ready to look beyond the two dimensions of top/left/bottom/right settings to the third dimension provided by layers, which you control in your web design by using the CSS property "z-index".
In the top image on the right, there is a parent containing <div> with a CSS setting of position:relative to provide an anchor for our use of absolute positioning for the internal elements, which consists of two <IMG> tags. The first <IMG> tag within that <DIV> shows the Happy Elf, and the second shows the Rainbow Sky image. Both images have a setting of position:absolute in order to position them within the parent positioned <DIV>. But they both also have a z-index setting in order to show the Happy Elf on top of the Rainbow Sky image, even though the Happy Elf <IMG> tag actually appears first in the HTML code. We could swap the two tags in the HTML with no effect on how they appear on the page because we are controlling their position and z-index with CSS.
The bottom image is a clearer illustration of the use of z-index for layers. The parent containing <DIV> is given a black border to make it visible to you. Inside, we have the same Rainbow Sky image with the same CSS position and z-index settings as I used in the top example. This time, I added a CSS caption <DIV> that is displayed over the image, but slightly underneath and to the right of it. It is positioned using the "bottom" and "right" settings so that it is displayed with reference to those boundaries of the parent containing <DIV>.
Click Here
to see the actual HTML and CSS
that produces the layering effects being demonstrated.
As you can see, using "z-index" you can show some content in front or behind other content in your web pages. My CSS Animation Demonstration shows how layers and JavaScript animation can be combined to produce a special effect. I've also created a JavaScript & CSS Slideshow that puts it to practical use.
The z-index property lets you select the visual layer where the content will reside, allowing you to stack or overlay content to produce the desired web page design. When you combine the z-index property with other CSS positioning settings, you have great control over the presentation of your web pages. Note, however, the z-index setting does not affect the document flow. Adjacent elements with different z-index settings will have space allocated in the document without regard for the z-index settings. This is why you'll almost always find one or more elements are set to position:absolute when the designer has used the z-index property, as the absolute positioning removes the element from the normal document flow.
