mozilla

Revision 46828 of Adding z-index

  • Revision slug: CSS/Understanding_z-index/Adding_z-index
  • Revision title: Adding z-index
  • Revision id: 46828
  • Created:
  • Creator: Waltonad0283
  • Is current revision? No
  • Comment /* Adding z-index */

Revision Content

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 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.

The above is incorrect! z-index only applies if an element is positioned. The image below displays a bug in Firefox that has since been fixed. Since #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). (Edit by another user - FF seems to not support a negative z-index value)

  • 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>

Original Document Information

{{ wiki.languages( { "fr": "fr/Comprendre_le_z-index_en_CSS/Ajout_de_z-index" } ) }}

Revision Source

<p>
</p>
<h4 name="Adding_z-index"> Adding z-index </h4>
<p>The first example, <i>Stacking without z-index</i>, explains how stacking is arranged by default. If you want to specify a different stacking order, you have to use the z-index property.
</p><p>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.
</p><p><b>The above is incorrect!</b>
z-index only applies if an element is positioned.  The image below displays a bug in Firefox that has since been fixed.  Since #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). (Edit by another user - FF seems to not support a negative z-index value)
</p><p><small>
</small></p>
<ul><li> <i>bottom: furthest from the observer</i>
</li><li> ...
</li><li> Layer -3
</li><li> Layer -2
</li><li> Layer -1
</li><li> Layer 0 <i>default rendering layer</i>
</li><li> Layer 1
</li><li> Layer 2
</li><li> Layer 3
</li><li> ...
</li><li> <i>top: closest to the observer</i>
</li></ul>
<p>
</p><p>Notes:
</p>
<ul><li> When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
</li><li> If several elements share the same z-index value (<i>i.e.</i> they are placed on the same layer), stacking rules explained in the section <i>Stacking without z-index</i> apply.
</li></ul>
<p>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.
</p><p><img alt="Example of stacking rules modified using z-index" src="File:en/Media_Gallery/Understanding_zindex_03.png">
</p><p><b>Example source code</b>
</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html&gt;
&lt;head&gt;&lt;style type="text/css"&gt;

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;
}

&lt;/style&gt;&lt;/head&gt;

&lt;body&gt;

&lt;br /&gt;&lt;br /&gt;

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

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

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

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

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

&lt;/body&gt;&lt;/html&gt;
</pre>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Paolo Lombardi
</li><li> This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>
</li><li> Last Updated Date: July 9th, 2005
</li></ul>
</div>
{{ wiki.languages( { "fr": "fr/Comprendre_le_z-index_en_CSS/Ajout_de_z-index" } ) }}
Revert to this revision