mozilla

Revision 8453 of z-index

  • Revision slug: CSS/z-index
  • Revision title: z-index
  • Revision id: 8453
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment rewrite

Revision Content

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

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

Specifications

Browser compatibility

See also

{{template.Cssxref("position")}}

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

Revision Source

<p> 
{{template.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> <a href="en/CSS/initial_value">Initial value</a>: auto
</li><li> Applies to: <a href="en/CSS/position">positioned elements</a>
</li><li> <a href="en/CSS/inherited_and_non-inherited_properties">Inherited</a>: no
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> <a href="en/CSS/computed_value">Computed value</a>: 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>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("position")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}
Revert to this revision