CSS Positioning With Z-Index

After you've read my CSS Positioning Tutorial which teaches you how to use relative and absolute positioning properly, 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 website design by using the CSS property 'z-index'.

The z-index property lets you select the visual layer where the content will appear, allowing you to "stack" or "overlay" content to produce the desired web design layout. When you combine the z-index property with other CSS positioning settings, you have great control over the presentation of your web pages. Note that elements with the 'z-index' property set do not affect the document flow in other layers, only within the same layer. Adjacent elements with different z-index settings will have space allocated in the document normally and independently. Since the 'z-index' property only applies to positioned elements (relative, absolute, or fixed), you should always find that the element itself, or a parent element, has a CSS rule for "position" when the designer has used the z-index property according to the W3C Standards.

Happy Elf Rainbow Sky

Rainbow Sky
Rainbows Are Pretty!

In the first image here, there is a parent containing div with its CSS 'position' property set to relative in order to provide an anchor for our use of absolute positioning for 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.

It's hard to see that there are actually two separate images in use here just by looking at the page. But if you resize your browser window, you'll see that the size of Rainbo Sky image changes, but the Happy Elf always remains the same size.

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 element.

Click Here to see the actual HTML and CSS
that produces the layering effects being demonstrated.

Z-Index & CSS Positioning Summary

More CSS Tutorials

CSS Positioning Tutorial
CSS Nested DIVs & Floats Tutorial
CSS Affects on Element Size
CSS Visibility Tutorial
CSS Vertical Align Tutorial
CSS Centering Tutorial
CSS Overflow Tutorial
Changing Stylesheets With JavaScript

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.

This page was last modified on December 09, 2015

Copyright © 2005-2018 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!