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:
/* 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;
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 the same as its parent's box.
<integer>
<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 is
0
. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.
| 初始值 |
auto
|
|---|---|
| 适用于 | positioned elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | an integer |
| Creates stacking context | yes |
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
z-index
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 | Opera 完整支持 4 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
| Negative values | Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 3 | IE 完整支持 4 | Opera 完整支持 4 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
position
property