CSS 相同 z-index 的绝对定位元素：谁在顶部

在本文中，我们将介绍 CSS 中具有相同 z-index 值的绝对定位元素的层叠顺序问题。当多个绝对定位元素具有相同的 z-index 值时，哪个元素会显示在顶部？我们将探讨这个问题，并提供示例说明。

阅读更多：CSS 教程

层叠顺序规则

在 CSS 中，当多个元素发生重叠时，它们的层叠顺序决定了哪个元素位于顶部。层叠顺序由三个因素决定：

元素类型：不同类型的元素有不同的默认层叠顺序。例如，定位元素（positioned elements）通常比非定位元素（non-positioned elements）具有更高的层叠顺序。定位元素包括绝对定位（absolute positioning）、相对定位（relative positioning）和固定定位（fixed positioning）元素。
元素位置：位于后面的元素通常具有更高的层叠顺序。这意味着先出现在 HTML 结构中的元素通常位于顶部。
z-index 值：z-index 是一个 CSS 属性，用于为元素指定层叠顺序。具有较高 z-index 值的元素通常会位于具有较低 z-index 值的元素之上。

同一 z-index 值的层叠顺序

当多个绝对定位元素具有相同的 z-index 值时，层叠规则中的元素类型和位置将起到决定性作用。以下是一些示例，说明同一 z-index 值的情况下哪个元素显示在顶部。

1. 位于后方的元素

在 HTML 结构中，位于靠后位置的元素将显示在顶部。无论其 z-index 值是否与前面的元素相同，后方元素始终显示在顶部。以下示例说明了这一点：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1 {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
}

.box2 {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  z-index: 1;
}

.box3 {
  position: absolute;
  background-color: green;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 100px;
}

在上述示例中，虽然 .box2 的 z-index 值为 1，与 .box1 相同，但由于它位于 .box1 后方，所以最终 .box2 会显示在顶部。

2. 较高的 z-index 值

如果元素具有较高的 z-index 值，无论其在 HTML 结构中的位置如何，都会显示在顶部。以下示例说明了这一点：

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  position: absolute;
  background-color: yellow;
  width: 150px;
  height: 150px;
  left: 50px;
  top: 50px;
  z-index: 1;
}

.box2 {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 100px;
  z-index: 2;
}

在上述示例中，.box2 具有较高的 z-index 值（2），因此它将显示在 .box1 之上，无论它们在 HTML 结构中的顺序如何。

3. 同一 z-index 值的最后一个元素

如果位于同一 z-index 值的元素中，最后一个出现在 HTML 结构中的元素将显示在顶部。以下示例说明了这一点：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: orange;
  z-index: 1;
}

.box:nth-child(2) {
  left: 50px;
  top: 50px;
}

.box:nth-child(3) {
  left: 100px;
  top: 100px;
}

在上述示例中，.box 元素都具有相同的 z-index 值（1），但是由于最后一个 .box 出现在 HTML 结构中，它最终会显示在顶部。

总结

当多个绝对定位元素具有相同的 z-index 值时，层叠顺序由元素的类型、位置和 z-index 值共同决定。一般情况下，位于后方的元素会显示在顶部，但如果元素具有较高的 z-index 值，则无视其位置在 HTML 结构中的先后顺序。另外，如果同一 z-index 值的元素中，最后一个出现在 HTML 结构中的元素将显示在顶部。通过理解这些层叠规则，我们可以更好地控制和调整页面元素的层次关系。