举例详解CSS的z-index属性的使用

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属性一起考虑，以保证效果的正确。