The Z-index
This is the
first CSS layer
This is the
first CSS layer
CSS-P (positioning) allows us to position elements on a page in two dimensions.
The z-index property allows us to operate in the 3rd dimension.
For example we can make the blue block appear on top of the orange block.
The z-index property allows us to determine the stacking order of objects.
The z-index indicates which layer should appear on top.
The default z-index value is 0 so giving the second element a z-index of 1 places it on top.
You can use values up to 255 to stack objects.
<head>
<style type="text/css">
<!--
#element1 {z-index:0;background-color:steelblue; position:absolute; top:230px; left:600px;}
#element2 {z-index:1;background-color:orange; position:absolute; top:240px; left:605px;}
//-->
</style>
</head>
<body>
<div id='element1'><br /><br />
This is the <br>
first CSS layer<br></div>
<div id='element2'> <! id tag identifies an element -->
This is the second CSS layer</div>
</body>
Animation using Z-index Here is a more sophisticated example of changing the z-index with javascript to produce animations.
Exercises
1. Copy the code above and use the z-index to change the order of the elements.
2. Use your knowledge of css positioning to turn these five images into the
hand below.
