一、什么是z-index属性

z-index是CSS中一个控制元素层级关系的属性。层级越大，显示在上层的位置就越靠前。

二、如何使用z-index排布div的显示顺序

默认情况下，如果两个div盒子互相重叠，则后出现的盒子会覆盖先出现的盒子。

例如下面这段代码会生成两个div，其中第二个盒子位置与第一个盒子重叠，这样第二个盒子会覆盖第一个盒子：

<body>
  <div style="background-color: red; height: 100px; width: 100px;"></div>
  <div style="background-color: green; height: 100px; width: 100px; position: relative; left: 50px;"></div>
</body>

如果要把第一个盒子显示在最前面，只需要给它添加一个z-index属性，z-index的值大于第二个盒子的z-index值就行了，例如：

<body>
  <div style="background-color: red; height: 100px; width: 100px; z-index: 1;"></div>
  <div style="background-color: green; height: 100px; width: 100px; position: relative; left: 50px; z-index: 0;"></div>
</body>

这样，第一个盒子就会显示在第二个盒子之前了。

如果两个div盒子的z-index值相同，则谁先出现在DOM结构中谁就会被显示在前面。

例如下面这段代码会先出现红色的盒子，后出现绿色的盒子，即使后出现的绿色盒子的定位比红色盒子更靠前，因为红色盒子在DOM中先出现，所以会显示在绿色盒子的上面：

<body>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; left: 50px; z-index: 1;"></div>
  <div style="background-color: green; height: 100px; width: 100px; position: relative; left: 50px; z-index: 1;"></div>
</body>

因此，如果想要绿色盒子显示在最前面，可以把它移到红色盒子的后面，例如：

<body>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; left: 50px; z-index: 1;"></div>
  <div style="background-color: green; height: 100px; width: 100px; position: relative; left: 50px; z-index: 1;"></div>
</body>

三、总结

以上就是使用z-index属性控制div盒子层级关系的完整攻略。需要注意的是，z-index属性只在position属性值为relative、absolute和fixed的元素上才起作用。另外，z-index属性的值只有在同一个层叠上下文内才有意义，如果两个元素不在同一个层叠上下文中，则它们之间的z-index值的大小关系是无意义的。

一、什么是z-index属性

二、如何使用z-index排布div的显示顺序

三、总结

基础教程推荐