z-index

z-index该属性指定元素及其子元素的 z-order。当元素之间重叠时，z-order 可决定元素显示的顺序。一般 z-index 较大的元素会在 z-index 较小的上方显示。

 

语法

/* <integer> values */
z-index: 1;
z-index: -1;

z-index: auto;

值

值描述
integer 该关键词是生成的元素在当前堆叠上下文中的堆叠层级，同时会创建一个堆叠层级为0的本地堆叠上下文。这说明子元素的z-index不同元素外的元素的z-index进行对比。
auto 此关键词不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素与父元素堆叠层级相同。

例子

HTML 

<div id="wrap">
    <div id="red"></div>
    <div id="orange"></div>
</div>

CSS 

#wrap {
      width: 200px;
      height: 100px;
      position: relative;
}
#red {
     width: 200px;
     height: 50px;
     background: red;
     position: absolute;
     z-index: 3;
}
#orange {
     width: 100px;
     height: 100px;
     background: orange;
     position: absolute;
     z-index: 2;
}

执行结果

参考

相关链接

外部链接


跳至内容顶部