1. 概述
在CSS中，z-index属性用于定义元素的堆叠顺序。通过控制元素的堆叠顺序，我们可以控制元素在叠放时的显示优先级。
2. z-index属性的基本用法
z-index属性的取值为整数或auto。整数表示元素的堆叠顺序，数值越大，显示优先级越高。而auto表示由元素的文档流决定元素的堆叠顺序。
.example {
z-index: 1;
}
在上面的例子中，class为example的元素的堆叠顺序为1，表示其显示的优先级较低。
3. z-index属性的使用场景
3.1 元素覆盖
一个常见的使用场景是控制元素的覆盖关系。通过给较高优先级的元素设置较大的z-index值，可以使其在叠放时覆盖低优先级的元素。
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.content {
position: relative;
z-index: 1;
}
在上面的例子中，class为overlay的元素通过设置较高的z-index值，覆盖在class为content的元素之上。
3.2 元素层级控制
有时候，元素的层级关系可能比较复杂，z-index属性可以帮助我们精确控制元素的显示顺序。
.layer1 {
z-index: 3;
}
.layer2 {
z-index: 2;
}
.layer3 {
z-index: 1;
}
在上面的例子中，我们通过给不同的元素设置不同的z-index值，实现了元素的层级控制。
4. 注意事项
4.1 z-index属性只对定位元素有效
z-index属性只对设置了position属性的元素有效。如果一个元素没有设置position属性或position属性的值为static，则z-index属性不会起作用。
4.2 z-index只在同一堆叠上下文中起作用
每一个元素都会形成一个堆叠上下文，只有在同一个堆叠上下文中的元素才会互相影响。如果两个元素处于不同的堆叠上下文中，z-index的大小比较就没有意义。
4.3 z-index属性不仅仅决定叠放顺序
除了决定叠放顺序，z-index属性还会影响元素的绘制顺序。具体表现在，有不透明元素和透明元素叠放时，透明元素会先进行绘制，然后不透明元素绘制在上面，即使z-index值较小。
5. 小结
通过使用z-index属性，我们可以精确控制元素的显示优先级和叠放顺序。但是需要注意的是，z-index的使用需要结合其他CSS属性一起考虑，以保证效果的正确。