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.

/* 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:

The stack level of the box in the current stacking context. Whether the box establishes a local stacking context.

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

auto

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

<integer>

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

Initial value	auto
Applies to	positioned elements
Inherited	no
Computed value	as specified
Animation type	an integer
Creates stacking context	yes

Formal syntax

auto | <integer>

Examples

Visually layering elements

HTML

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

CSS

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

Result

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # z-index

See also

CSS position property Understanding CSS z-indexes

Last modified: Feb 2, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiРусский中文 (简体) Change language