z-index property CSS Reference

Definition and Usage

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:

  • The stack level of the box in the current stacking context.
  • Whether the box establishes a local stacking context.
  • Initial auto
  • Applies to positioned elements
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable yes, as an integer
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: auto | <integer>
z-index: auto     /* Keyword value */
z-index: 0        /* <integer> value */
z-index: 3
z-index: 289
z-index: inherit


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


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


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier)
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec)1.03.0 (1.9)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportNANANANANA

Relative articles