z-index 如何在 CSS 中工作？

在 CSS 中，z-index 是一个用于控制元素在垂直层叠顺序中显示的属性。它允许您定义一个元素相对于其他元素的显示顺序。较高的 z-index 值会使元素在层级结构中处于更上层，因此会遮挡较低的 z-index 值的元素。

设置 z-index 值

要设置一个元素的 z-index 值，您可以使用以下语法：

selector {
  z-index: value;
}

其中，selector 是您希望设置 z-index 的元素的选择器，value 是一个整数值。较大的整数值会使元素处于更高的层级。

请注意，z-index 仅适用于定位元素（通过 position 属性设置为 relative、absolute 或 fixed）。

使用示例

考虑以下示例：

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

.container {
  position: relative;
}

.box {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.box1 {
  background-color: blue;
  z-index: 2;
}

.box2 {
  background-color: red;
  z-index: 1;
}

在这个例子中，.container 定义了一个相对定位的容器，.box 是绝对定位的两个元素。.box1 的 z-index 值为 2，.box2 的 z-index 值为 1。这意味着 .box1 将位于 .box2 的上方，并且 .box2 将被 .box1 遮挡。

注意事项

以下是一些注意事项，当使用 z-index 时需要考虑：

1. z-index 仅在定位元素（通过 position 属性设置为 relative、absolute 或 fixed）上生效。
2. z-index 仅在具有不同的 z-index 值的元素之间进行比较。如果两个元素具有相同的 z-index 值，它们将按照在 HTML 中出现的先后顺序进行层叠。
3. z-index 只能应用于具有定位的父级元素内的子元素。如果父级元素没有定位，子元素的 z-index 无效。
4. 使用负数的 z-index 值时，元素将移动到父元素的下面，或者更低 z-index 值的其他同级元素的下面。

结论

z-index 是一种用于控制元素在垂直层叠顺序中显示的强大 CSS 属性。通过设置不同的 z-index 值，您可以控制元素的堆叠顺序，并实现复杂的视觉效果。然而，需要注意的是，使用 z-index 时需要审慎考虑，避免过度使用和使页面布局变得混乱。