放置在实际子节点上的HTML伪元素

Question

由于某种原因，当添加元素的伪子节点时，其z-index高于其子节点，即使它是::before元素，它出现在相关子节点之前，但不是这样显示。为什么会发生这种情况，有没有办法解决它？

这是一个示例，其中子<h1>节点 应该显示为将其悬停在黑色伪元素上，但事实并非如此。

https://jsfiddle.net/9u33vko0/

我的理解是否从根本上是错误的？

div {
  width: 100%;
  padding: 40px 0;
  border: 1px solid #DDD;
  text-align: center;
  color: #FFF;
  position: relative;
}

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

<div>
  <h1> <!-- should appear above the black ::before element -->
    Hello, World!
  </h1>
</div>

Answer 1

即使:before伪元素在 DOM中的h1元素之前出现，它仍然会与h1元素重叠，因为它{{3}因为它被定位（使用position: absolute）。

以下是establishes a stacking context（绘画顺序;第8点）

的相关引用

  

所有定位的后代都以z-index: auto或z-index: 0按树顺序排列。对于那些z-index: auto的人，请将元素视为创建新的堆叠上下文...

因此，您可以通过定位h1元素来建立堆叠上下文（即添加position: relative）。这样做时，h1元素将放置在:before伪元素之上，因为它出现在DOM中的伪元素之后，并且两个元素都以z-index auto定位}。

CSS2 specification on stacking contexts

h1 {
  position: relative;
}

＆＃13;

＆＃13;

div {
  width: 100%;
  padding: 40px 0;
  border: 1px solid #DDD;
  text-align: center;
  color: #FFF;
  position: relative;
}

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

h1 {
  position: relative;
}

＆＃13;

<div>
  <h1>Hello, World!</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

当然，你也可以给伪元素一个负z-index，但除了这一点之外。归结到它时，建立堆叠上下文就足够了，因为:before伪元素出现在DOM中的h1元素之前（正如您已经指出的那样）。