z-index 不适用于绝对位置 - CSS

在CSS中，z-index属性用于控制堆叠顺序，即覆盖顺序。我们可以使用它来确保某个元素在其他元素之上或之下。但是，它不适用于绝对定位元素。

当一个元素使用绝对定位，它会从文档流中脱离出来，不再受到其他元素的影响。这意味着z-index属性对它的影响也会减少。

举个例子，假设我们有一个具有z-index: 2属性的父级元素和一个绝对定位的子级元素。父级元素中的所有元素都应该在子级元素之上，因为它们的z-index值较高。但是，由于子元素具有绝对定位，它不会受到父级元素的影响，因此它将显示在其他元素之上。

.parent {
  position: relative;
  z-index: 2;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="parent">
  <div>Parent Content</div>
  <div class="child">Child Content</div>
</div>

在上面的例子中，将会发现这个子元素会显示在父级元素之上。

虽然绝对定位元素的z-index属性不会影响它的父级元素，但它们的z-index属性仍然可以影响其他兄弟元素的堆叠顺序。因此，我们可以使用z-index来确保子元素在其他兄弟元素之上或之下。

为了更好的理解，请看下面的例子：

.parent {
  position: relative;
  z-index: 1;
}

.child1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.child2 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

<div class="parent">
  <div class="child1">Child 1 Content</div>
  <div class="child2">Child 2 Content</div>
</div>

在这个例子中，我们在父级元素上设置了z-index: 1，而在第一个子级元素上设置了z-index: 2，在第二个子级元素上设置了z-index: 1。由于z-index属性不适用于绝对定位的元素，第一个子级元素将显示在父级元素之上，但在第二个子级元素的下面。

总之，z-index属性在绝对定位元素中不起作用，这意味着它们的层叠顺序取决于文档流以外的其他因素。但是，它们的z-index属性仍然可以影响其他兄弟元素的堆叠顺序。