9.4 Z-Index

CSS operates in three dimensions: height, width and depth. Elements can be assigned a z-index number, wherby elements with higher numbers go in front of elements with lower numbers. Note that this only works on elements that have been positioned using the position property (absolute, fixed, or relative).

The default Z-index is 0. For example, elements assigned negative numbers go behind this, and those assigned positive numbers go in front. An element with greater stack order is always in front of an element with a lower stack order.

These layers are useful, for example, to create effects in headlines instead of using graphics (which results in faster page loading and helps with SEO (Search Engine Optimisation).

Say we wished to have a nice red heading with a grey shadow. This will eventually become possible through future CSS properties designed specifically for this taks but for now we can use the Z-Index with a simple positioning trick. The CSS could go like this:

h1		{
		position:absolute;
		left: 150px;
		top: 50px;
		z-index: 1;
		font-size:50px;
		color:#990000;
		}

.shaddow	{
		position:absolute;
		left: 154px;
		top: 54px;
		z-index: 0;
		font-size:50px;
		color:gray;
		}

Here we have positioned h1 absolutely, and have defined a class selector called .shaddow with a lower Z-Index and a slightly offset position from h1. And the HTML would only need a little extra markup in the form of adding a class selector:

<h1>Hellow World!</h1>

<h2 class="shaddow">Hellow World!</h2>

Click here to see the result.

Although this is a fairly basic example, it does highlight that depth can be used in webpages through CSS to create some exciting effect possibilites.