Skip to main content

Visit Mozilla.org

Understanding CSS z-index:Adding z-index

From MDC


[edit] Adding z-index

The first example, Stacking without z-index, explains how stacking is arranged by default. If you want to specify a different stacking order, you have to position an element and use the z-index property.

This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers.

Warning! z-index only has an effect if an element is positioned (see discussion). The explanation below, including the image below, is erroneously influenced by a bug in Firefox 2 and below that has since been fixed.[ 1] Since DIV #5 (#normdiv) has no positioning it does not matter what its z-index is and it is stacked as if it had no z-index specified (in this case, under everything else).

  • bottom: furthest from the observer
  • ...
  • Layer -3
  • Layer -2
  • Layer -1
  • Layer 0 default rendering layer
  • Layer 1
  • Layer 2
  • Layer 3
  • ...
  • top: closest to the observer

Notes:

  • When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
  • If several elements share the same z-index value (i.e. they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply.

In the next example, the layers' stacking order is rearranged using z-index. DIV#5, normally below all the others, is now above all of them because it has the greatest z-index.

Example of stacking rules modified using z-index

Example source code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">

div {
   opacity: 0.7;
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
   z-index: 8;
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv1 {
   z-index: 3;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv2 {
   z-index: 2;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#absdiv1 {
   z-index: 5;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#absdiv2 {
   z-index: 1;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

</style></head>

<body>

<br /><br />

<div id="absdiv1">
   <br /><span class="bold">DIV #1</span>
   <br />position: absolute;
   <br />z-index: 5;
</div>

<div id="reldiv1">
   <br /><span class="bold">DIV #2</span>
   <br />position: relative;
   <br />z-index: 3;
</div>

<div id="reldiv2">
   <br /><span class="bold">DIV #3</span>
   <br />position: relative;
   <br />z-index: 2;
</div>

<div id="absdiv2">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
   <br />z-index: 1;
</div>

<div id="normdiv">
   <br /><span class="bold">DIV #5</span>
   <br />no positioning
   <br />z-index: 8;
</div>

</body></html>

[edit] Footnotes

1. In addition to any bugs, the behaviour of Firefox 2 and below regarding stacking contexts and z-index reflects the CSS 2 Specification which was significantly changed in the CSS 2.1 Candidate Recommendation. In particular, the treatment of stacking contexts with negative z-index values is very different (rendered below the parent context's background) from the CSS 2.1 behaviour exhibited in Firefox 3 (rendered above the parent context's background).

[edit] Original Document Information

Retrieved from "http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:Adding_z-index"