The Z-Index Property

The Z-Index Property

Positioning elements frequently causes them to overlap and, in fact, the possibility of having elements overlap is an important reason for using positioning in the first place. The normal rule is that elements that come later in the source document are on top of earlier elements. But, as we saw in the example with the star (refer to Figure), that is not always what we want. That example therefore used the z-index property to explicitly put the image behind its containing block. Figure shows an example.

Figure. The effect of z-index: a3 has the highest z-index and is on top; a4 has the lowest z-index and is behind the others.


  DIV {position: absolute; border: solid;

    width: 5em; height: 5em; background: silver;

    text-align: right}

  .a1 {top: 1em; left: 1em; z-endex: 3}

  .a2 {top: 2em; left: 3em; z-index: 2}

  .a3 {top: 3em; left: 2em; z-index: 4}

  .a4 {top: 4em; left: 4em; z-index: 1}


<DIV CLASS="a1"><P>a1</DIV>

<DIV CLASS="a2"><P>a2</DIV>

<DIV CLASS="a3"><P>a3</DIV>

<DIV CLASS="a4"><P>a4</DIV>




auto | <integer>



Applies to:

positioned elements





A negative value means that the element will be behind its containing block, and a value of zero or higher means it will be in front. auto is the same as zero (but see the following).

If two elements have the same containing block and the same z-index, the element that comes later in the source will be in front of the earlier element.

The value auto has an effect when containing blocks are nested. If an element that is a containing block for some other elements has a z-index of auto, it means that the z-index of the elements inside this block isn't relative to this containing block, but to the nearest enclosing containing block that doesn't have auto for its value. Thus, if you leave the z-index of all containing blocks as auto, all z-indexes will be relative to the root element, no matter how deeply nested the elements are.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows