Z-Index

Make your own free website on Tripod.com
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 :

  1. The stack level of the box in the current stacking context.

  2. Whether the box establishes a local stacking context.

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.