摘要
z-index
属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个固定位置的元素,z-index
属性指定:
- 元素在当前堆叠上下文中的堆叠层级。
- 元素是否创建一个新的本地堆叠上下文。
初始值 | auto |
---|---|
适用元素 | positioned elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | yes, as an integer |
正规顺序 | 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; /* 使用负值降低优先级 */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
取值
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: 20em;
top: -25px;
height: 7em;
opacity: 0.9;
}
结果
position:relative; z-index:1; position:absolute; z-index:2; left:60px; top:3em; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9
left:20em; top:-25px; opacity:0.9
规范
Specification | Status | Comment |
---|---|---|
CSS Transitions visibility |
Working Draft | Defines visibility as animatable. |
CSS Level 2 (Revision 1) z-index |
Recommendation | Initial specification. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 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 | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
参阅
- CSS
position
property - 理解CSS的 z-index属性