CSS 为什么一个具有 z-index 值的元素无法遮挡住其子元素

在本文中，我们将介绍为什么一个具有 z-index 值的元素无法遮挡住其子元素的原因。了解这个问题的原因是理解 CSS 中层叠上下文和层叠顺序的重要一步。

阅读更多：CSS 教程

层叠上下文和层叠顺序

在 CSS 中，层叠的概念是指元素在页面上互相叠加的顺序。当多个元素重叠在一起时，层叠顺序决定了哪个元素显示在前面，哪个元素显示在后面。而层叠顺序是由元素的 z-index 值决定的，具有较高 z-index 值的元素会显示在具有较低 z-index 值的元素之上。

层叠上下文是一种机制，用于管理层叠顺序。每个元素都有一个层叠上下文，它决定了元素在层叠顺序中的位置。当一个元素形成一个层叠上下文时，它的子元素也会继承这个层叠上下文。这意味着，一个具有较高 z-index 值的元素可以覆盖一个具有较低 z-index 值的元素，即使后者是前者的子元素。

z-index 受限于层叠上下文

然而，有一种情况下一个具有 z-index 值的元素无法完全遮挡住其子元素，那就是当子元素形成了自己的层叠上下文时。

在 CSS 中，特定的 CSS 属性或属性值可以创建一个新的层叠上下文。例如，当一个元素的 position 属性设置为 absolute 或 relative，且 z-index 属性不为 auto（默认值），这个元素将会创建一个新的层叠上下文。其他属性，例如 transform、opacity、filter 等，也可以创建层叠上下文。

当一个元素的子元素创建了一个新的层叠上下文时，这个子元素将会在其父元素的层叠顺序之上。即使父元素具有较高的 z-index 值，也无法完全遮挡住子元素。

以下是一个示例，演示了这种情况：

<div class="parent">
  <div class="child"></div>
</div>

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

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

在这个示例中，父元素 .parent 的 z-index 值为 1，子元素 .child 的 z-index 值为 2。根据我们的理解，子元素应该显示在父元素之上。然而，由于子元素 .child 创建了一个新的层叠上下文，它的层叠顺序将位于父元素之上，导致父元素无法完全遮挡住子元素。

如何解决这个问题

要解决这个问题，有一些方法可以尝试。

第一种方法是将子元素的层叠上下文在父元素中关闭。我们可以设置子元素的 z-index 值为负数，这样它就不会创建一个新的层叠上下文。例如：

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

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

这样，子元素的层叠顺序将位于父元素之下，从而实现父元素完全遮挡子元素的效果。

第二种方法是改变父子元素的结构。我们可以将子元素移出父元素，并用其他方法实现想要的效果。例如，我们可以使用 CSS 伪元素 ::before 或 ::after 来覆盖父元素。

<div class="parent"></div>
<div class="child"></div>

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

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

在这个示例中，我们使用 .parent 的伪元素 ::before 来覆盖整个父元素的区域，从而实现父元素完全遮挡子元素的效果。

总结

在 CSS 中，一个具有 z-index 值的元素无法遮挡住其子元素的原因是，当子元素创建了自己的层叠上下文时，它的层叠顺序将位于父元素之上。为了解决这个问题，我们可以关闭子元素的层叠上下文或者改变父子元素的结构。了解层叠上下文和层叠顺序的原理对于掌握 CSS 中元素的层叠关系非常重要。所以，在开发中，我们应该充分理解并正确应用层叠机制。