绝对位置上的 z-index - CSS

介绍

在 CSS 中，z-index 属性用来控制元素在垂直方向上的堆叠顺序。它只能应用于被定位的元素，比如使用 position: absolute 或 position: fixed 的元素。z-index 值越高的元素将覆盖在 z-index 值较低的元素之上。

使用方式

CSS 语法：

selector {
  z-index: value;
}

其中，selector 可以是任何 CSS 选择器，而 value 则是一个整数值（正数、负数或零）。

值的范围

• 如果所有的元素都没有指定 z-index 值，它们将按照它们在 HTML 中出现的顺序进行堆叠。
• z-index 值为负数表示元素位于普通流中的元素之后。
• z-index 值为零表示元素被放置于普通流中的基准层级，不会改变元素在堆叠顺序上的位置。
• z-index 值为正数表示元素位于普通流中的元素之前。

注意事项

• z-index 只在定位元素上有效（即具有 position: absolute、position: fixed、position: relative 之一）。
• z-index 只在同级元素之间有效，不会影响父级或子级元素之间的堆叠顺序。
• 较高的 z-index 值不一定总是位于较低的 z-index 值之上，还受到其他因素（如父元素的 z-index 值）的影响。

示例

以下示例演示了如何在 CSS 中使用 z-index 属性：

.box1 {
  position: absolute;
  z-index: 2;
}

.box2 {
  position: absolute;
  z-index: 1;
}

.box3 {
  position: absolute;
  z-index: -1;
}

在上述示例中，.box1 元素位于 .box2 元素之前，而 .box3 元素位于 .box1 和 .box2 元素之后。

总结

z-index 属性是一个控制元素在垂直方向上堆叠顺序的重要属性，通过设定不同的值可以实现元素覆盖和布局效果。在使用时要注意其在定位元素上的适用性，以及它仅影响同级元素的堆叠顺序。