The z-index
property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
For a positioned box (that is, one with any position
other than static
), the z-index
property specifies:
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 |
/* 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;
auto
<integer>
0
. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.auto | <integer>
<div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div>
.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 |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 1.0 |
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) | 1.0 | ? | 3.0 (1.9) | 4.0 | 4.0 | 1.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) | ? | ? | ? | ? | ? | ? |
position
property
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index