☰ Menu

Featured Scripts
& Tutorials

CSS Tutorials

PHP Watermark Script

PHP Automatic Thumbnail Maker

JavaScript Multiple Slideshows

Google Adwords PPC Calculator

SMTP FormMail Script with Attachments

Image Tools/Scripts

Server Log Tools

JavaScript Tools & Tutorials

No-Frames 1-File Menu

Pre-Populate Forms with Javascript

SEO Tips & Tutorials

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.

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

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 October 01, 2020