css - 为什么 div::before 显示在子元素之上？

Question

这对我来说没有意义。::before 不应该在跨度之前呈现吗？如果我将 position:relative 添加到子元素，它就会起作用。

这可能与堆栈上下文有关，但我不确定究竟如何。

https://www.w3.org/TR/CSS21/visuren.html#layers

这种情况下的跨度落在 #3 中是因为它是非定位的，而::before #6 因为它是定位后代？

div { position:relative; }

div:before {
  content: '';
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

/* Adding this works: */
/* span { position: relative; } */

<div>
  <span>Test</span>
</div>

Answer 1

如果一个元素没有设置position，那么它在布局中被设置得很低。如果将任何元素定位为 absolute，则应为所有同级元素提供一些 position。在这个例子中 ::before 和 span 是 sibling ，因为 ::before 有位置而 span 没有t ::before 更“重要”