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 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:
/* 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: revert-layer; z-index: unset;
The z-index
property is specified as either the keyword auto
or an <integer>
.
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.
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Computed value | as specified |
Animation type | an integer |
Creates stacking context | yes |
<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; }
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
z-index |
1 | 12 | 1 | 4 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
negative_values |
1 | 12 | 3 | 4 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
position
property
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index