/* 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: revert; z-index: unset; 

z-index

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:

Syntax

/* 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: revert; z-index: unset; 

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

Values

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is 0.

This <integer> is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Formal definition

Formal syntax

auto | <integer>

Examples

Visually layering elements

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

.wrapper {   position: relative; }  .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; } 

Specifications

See also

Last modified: Feb 2, 2022, by MDN contributors