| Syntax : | z-index : value |
| Possible Values : | auto | integer | inherit |
| Initial value : | auto |
| Applies to : | positioned elements |
| Inherited : | no |
For a positioned box, the 'z-index' property specifies :
Values have the following meanings :
integer
This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.
auto
The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.
In the following example, the stack levels of the boxes (named with their "id" attributes) are :
"text2"=0, "image"=1, "text3"=2, and "text1"=3.
The "text2" stack level is inherited from the root box.
The others are specified with the 'z-index' property.
Example:
<HEAD>
<TITLE>Z-order positioning</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
#text1 {
color:white
}
#text2 {
color:black
}
#text3 {
color:lime
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile" src="red-square.gif" alt="A red-square image" style="z-index: 1">
<DIV id="text1" class="pile" style="z-index: 3">
This text will overlay the red-square image.
</DIV>
<DIV id="text2">
This text will be beneath everything.
</DIV>
<DIV id="text3" class="pile" style="z-index: 2">
This text will underlay text1, but overlay the red-square image
</DIV>
</P>
</BODY>
</HTML>
see example in action
The above example demonstrates the notion of transparency. The default behavior of a box is to allow boxes behind it to be visible through transparent areas in its content. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.