z-index
Z-指数
z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
/* 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;
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
1. 元素在当前堆叠上下文中的堆叠层级。
2. 元素是否创建一个新的本地堆叠上下文。
上面的例子显示的效果z-index。在左边我们画了三个盒子，并用绝对定位使它们重叠。默认情况下，这些元素按照它们在HTML中声明的顺序进行堆叠。在右边，我们有相同的标记，但已经扭转了使用默认z-index的顺序。
| 初始值 | auto |
|---|---|
| 适用元素 | positioned elements |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | an integer |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
语法
z-index属性被指定为关键字auto或一个<integer>。
值
auto元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。<integer>整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
正式语法
auto | <integer>
示例
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
.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 TransitionsThe 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 | (Yes) | 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) | ? | (Yes) | ? | ? | ? | ? |
另见
- CSS
position属性
- 理解css z-索引
