The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

For a positioned box (that is, one with any position other than static), 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.


/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

The z-index property is specified as either the keyword auto or an <integer>.


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.

Formal syntax

auto | <integer>



<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>


.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;



Specification Status Comment
CSS Transitions
The definition of 'animation behavior for z-index' in that specification.
Working Draft Defines z-index as animatable.
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.
Recommendation Initial definition
Initial value auto
Applies to positioned elements
Inherited no
Media visual
Computed value as specified
Animation type an integer
Canonical order the unique non-ambiguous order defined by the formal grammar
Creates stacking context yes

Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 4 4 1
Negative values 1 12 3 4 4 1
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes 4 Yes Yes Yes
Negative values Yes Yes Yes Yes Yes Yes Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.