CSS-P Tutorial 05 -- The z-index Property

Michael Masumoto's Cosmic CSS-P Tutorial

When Elements Overlap: The z-index Property

When two positioned elements overlap, how do you tell the browser which element goes in front? Just as you use the left property to set the x-axis (left to right) value, and the top property to set the y-axis (up and down) value, you need to use the z-index property to set the z-axis (forward and back) value in this flattened three-dimensional space; z-index tells the browser which element goes in front and which element goes behind.

Property: z-index
Values: 0 (zero) or any positive integer; negative values are not permitted.
Example: z-index:10;

The higher the z-index value is, the farther in front an element becomes; the lower the z-index value is, the farther in back an element becomes. 0 (zero) is the smallest value that may be legally set for z-index. You may not use negative numbers for z-index, nor may you use numbers with decimal places.

In the following example, I have two positioned DIV tags, fred (which contains the letter A graphic) and martha (which contains the letter B graphic). I have set fred's z-index to 10, and martha's z-index to 20; martha, therefore, is in front of fred.

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    z-index:10;
}

#martha {
    position:absolute;
    left:120px;
    top:45px;
    z-index:20;
}
//-->
</style>
</head>
<body>
<div id="fred">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>

<div id="martha">
<img src="./graphics/capitalB.gif" width="54" height="54" />
</div>
</body>
</html>

Here is the above example displayed.

In the next example, I have the same layout, but this time I have set fred's z-index to 100, bringing it in front of martha.

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    z-index:100;
}

#martha {
    position:absolute;
    left:120px;
    top:45px;
    z-index:20;
}
//-->
</style>
</head>
<body>
<div id="fred">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>

<div id="martha">
<img src="./graphics/capitalB.gif" width="54" height="54" />
</div>
</body>
</html>

Here is the above example displayed.

Again, higher z-index values go in front, lower z-index values go in back.

If NO z-index value is set, or BOTH z-index values are identical, then whichever DIV element comes LATEST on the HTML page goes in front.

In the following example, fred and martha have both been set to a z-index of 10. Because martha comes later in the HTML code than fred, she ends up being placed in front.

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    z-index:10;
}

#martha {
    position:absolute;
    left:120px;
    top:45px;
    z-index:10;
}
//-->
</style>
</head>
<body>
<div id="fred">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>

<div id="martha">
<img src="./graphics/capitalB.gif" width="54" height="54" />
</div>
</body>
</html>

Here is the above example displayed.

When I use CSS-P myself, I usually start with my first positioned element being at a z-index of at least 10. That way, if I change my mind about the design and need to position something BEHIND that element, I still have some z-index values left! Don't start with 0, because you can't put anything behind it! I also usually increment z-index by multiples of 10 (10, 20, 30, 40, etc), so that I have some z-index values BETWEEN various elements, in case I need to insert something else later. Words of wisdom from someone who's had to go back and change z-index values again and again!

Main Menu