z-index

  • Revision slug: CSS/z-index
  • Revision title: z-index
  • Revision id: 8459
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 171 words added, 56 words removed

Revision Content

{{ CSSRef() }}

Summary

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

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.
  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: {{ Cssxref("position", "positioned elements") }}
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

z-index:  auto | <integer> | inherit

Values

auto
The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
<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. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Examples

position:relative; z-index:1; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9
position:absolute; z-index:2; left:60px; top:3em;

Notes

Negative z-index values are supported correctly starting in Gecko 1.9 / Firefox 3. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 4.0
Safari (WebKit) 1.0 (85)

See also

{{ Cssxref("position") }}

{{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> z-index </code>CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.</p>
<p>For a positioned box, the<code> z-index </code>property specifies:</p>
<ol> <li>The stack level of the box in the current stacking context.</li> <li>Whether the box establishes a local stacking context.</li>
</ol>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Applies to: {{ Cssxref("position", "positioned elements") }}</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>z-index:  auto | &lt;integer&gt; | inherit</pre>
<h3>Values</h3>
<dl> <dt>auto</dt> <dd>The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.</dd> <dt>&lt;integer&gt;</dt> <dd>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<code> 0</code>. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element. </dd>
</dl>
<h3>Examples</h3>
<div style="border:dashed; position:relative; z-index:1; height:8em; margin-bottom:1em">position:relative; z-index:1; <span style="background:lightgreen; position:absolute; z-index:3; left:20em; top:-25px; height:7em; opacity:0.9">position:absolute; z-index:3;<br>
left:20em; top:-25px; opacity:0.9</span> <span style="background:gold; position:absolute; z-index:2; left:60px; top:3em; ">position:absolute; z-index:2; left:60px; top:3em;</span></div>
<h3>Notes</h3>
<p>Negative<code> z-index </code>values are supported correctly starting in <a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.9 / <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.</p>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" title="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Visual formatting #z-index</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>4.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ Cssxref("position") }}</p>
<p>{{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}</p>
Revert to this revision