mozilla

Revision 8458 of z-index

  • Revision slug: CSS/z-index
  • Revision title: z-index
  • Revision id: 8458
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{ CSSRef() }}

Summary

The z-index 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.

  • {{ 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 element is drawn at the same z-order as an element with z-index: 0. It does not create a new stacking context.
<integer> 
The element is drawn at the z-order given. It also creates a new stacking context, which means that all of its descendants also draw at that z-index. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Examples

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

See also

{{ Cssxref("position") }}

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

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p>The z-index 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>
<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 name="Syntax"> Syntax </h3>
<p>z-index: auto | &lt;integer&gt; | <a href="en/CSS/inherit">inherit</a>
</p>
<h3 name="Values"> Values </h3>
<dl><dt> auto </dt><dd> The element is drawn at the same z-order as an element with <code>z-index: 0</code>. It does <i>not</i> create a new stacking context.
</dd><dt> &lt;integer&gt; </dt><dd> The element is drawn at the z-order given. It also creates a new stacking context, which means that all of its descendants also draw at that z-index. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<h3 name="Notes"> Notes </h3>
<p>Negative <code>z-index</code> values are supported correctly starting in <a href="en/Gecko">Gecko</a> 1.9 / <a href="en/Firefox_3">Firefox 3</a>. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("position") }}
</p>{{ languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}
Revert to this revision