Css 为什么div:：before显示在children元素的顶部？

这对我来说毫无意义。不应该在跨度之前渲染：：before吗？如果我添加位置：相对于子元素，它就会起作用

这可能与堆叠上下文有关，但我不确定具体如何

本例中的跨度为3，因为它是未定位的，而：：在6之前，因为它是定位的后代

div{位置：相对；} 部门：以前{ 内容：； 宽度：100%； 身高：100%； 背景：红色； 位置：绝对位置； 排名：0； 左：0； } /*添加此项功能：*/ /*span{位置：相对；}*/ 测验

---

因为您指定了位置是绝对的，所以它使内容处于另一个流级别。您可以尝试指定z-index，但即使这样也不总是有效。例如，如果某个元素具有绝对/相对位置，则该元素将具有任意数量的z索引。如果某个项目没有设置位置，则该项目在布局中设置得非常低。如果您将任何元素定位为绝对元素，那么应该为所有同级元素提供一些位置。在本例中：：before和span是兄弟，因为：：before有位置而span没有：：before更重要

如何：pseudo CSS类的工作方式是将元素添加到元素之前和元素内部

像这样：

我不是很清楚你需要实现什么，但为了解释你的疑问，你在添加position:relative后产生当前结果的原因是：before设置了position:absolute。通过这样做，它将把：before元素从当前html层次结构中拉出来，并将其自身相对于设置div{position:relative；}的最近元素进行定位

---

由于before将从层次结构中拉出，因此将填充可用的空白空间，即重叠的：before。

您使用的是position:ABSOLATE，因此它将被准确地放置在您告诉它的位置，即左上角。例如，它确实与堆叠上下文有关，如果声明除auto之外的任何z-index值，如-1，则将创建一个堆栈上下文，并且：pseudo元素将显示在同级span元素的下面。如果不声明z-index值，绝对定位元素将始终出现在任何未定位元素或静态元素之上，例如：position:static-这通常是任何元素的默认位置。我希望所有答案都能像这样向我解释。简单易懂，无需专业术语。我做CSS已经有一段时间了，我想这是我第一次记得我必须在使用：：before时显式声明position:relative。

<div>
  :before
  <span>Test</span>
</div>