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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: 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 the same as its parent's box.
- <span id="<integer>">
<integer>
- 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 is0
. 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 | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1)The definition of 'z-index' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
z-index
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 4 |
Opera
Full support 4 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Negative values | Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 3 |
IE
Full support 4 |
Opera
Full support 4 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- CSS
position
property - Understanding CSS z-indexes
z-index by Mozilla Contributors is licensed under CC-BY-SA 2.5.