10.8 Z-Index & Images

As we saw earlier, CSS operates in three dimensions: height, width and depth. Elements that have been positioned using the position property (absolute, fixed, or relative) can also be assigned a z-index number to create layers, where elements with higher numbers go in front of elements with lower numbers (default Z-index is 0). It is worth demonstrating this again with images.

A Fiver A Tenner

Say we had a couple of images of some banknotes like the five pound note on the left and a ten pound note on the right. If we wished to place the tenner over the fiver in a webpage then we could add:

.pic1	{position:absolute;
	left: 50px;
	top: 50px;
	z-index: 1;}

.pic2	{position:absolute;
	left: 60px;
	top: 60px;
	z-index: 2;}

And the HTML would only need a little extra markup in the form of adding a couple of class selectors:

<img class="pic1" src="images/fiver.png" alt="A Fiver" title="A FIVER!"/>

<img class="pic2" src="images/tenner.png" alt="A Tenner" title="A TENNER!"/>

Click here to see the result.

And if we wish to place the tenner under the fiver:

.pic1	{position:absolute;
	left: 50px;
	top: 50px;
	z-index: 1;}

.pic2	{position:absolute;
	left: 60px;
	top: 60px;
	z-index: 2;}

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.