CSS 与z-index重叠的元素
示例
若要更改默认堆叠顺序定位的元素（position属性设置为relative，absolute或fixed），使用z-index属性。
z索引越高，在其放置的堆叠上下文中（在z轴上）越高。
示例
在下面的示例中，z索引值为3时将绿色置于顶部，z索引值为2则将红色置于其下方，而z索引值为1则将蓝色置于其下。
的HTML
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>
的CSS
div {
position: absolute;
height: 200px;
width: 200px;
}
div#div1 {
z-index: 1;
left: 0px;
top: 0px;
background-color: blue;
}
div#div2 {
z-index: 3;
left: 100px;
top: 100px;
background-color: green;
}
div#div3 {
z-index: 2;
left: 50px;
top: 150px;
background-color: red;
}这将产生以下效果：
请参阅JSFiddle上的工作示例。
语法
z-index: [ number ] | auto;
备注
所有元素都在CSS中的3D轴（包括深度轴）中进行布局，该轴由z-index属性测量。z-index仅适用于定位的元素：（请参阅：为什么z-index需要定义的位置才能起作用？）。唯一被忽略的值是默认值static。
在分层展示的CSS规范中以及Mozilla开发人员网络上，了解有关z-index属性和StackingContexts的信息。