若要更改默认堆叠顺序定位的元素（position属性设置为relative，absolute或fixed），使用z-index属性。
z索引越高，在其放置的堆叠上下文中（在z轴上）越高。
在下面的示例中，z索引值为3时将绿色置于顶部，z索引值为2则将红色置于其下方，而z索引值为1则将蓝色置于其下。
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>
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;
| 参数 | 细节 |
|---|---|
| number | 整数值。较高的数字在z-index堆栈上较高。0是默认值。允许负值。 |
| auto | 为元素提供与其父元素相同的堆叠上下文。（默认） |
所有元素都在CSS中的3D轴（包括深度轴）中进行布局，该轴由z-index属性测量。z-index仅适用于定位的元素：（请参阅：为什么z-index需要定义的位置才能起作用？）。唯一被忽略的值是默认值static。
在分层展示的CSS规范中以及Mozilla开发人员网络上，了解有关z-index属性和Stacking Contexts的信息。