为何<main>的绝对定位伪元素与相对定位文本不重叠？

这本质是CSS**堆叠上下文（Stacking Context）**的规则在起作用，拆解一下逻辑：

初始状态（未给article设置position: relative） #

• main::before是绝对定位元素，这类元素会脱离常规文档流，并且默认的堆叠层级高于普通流中的元素（此时article的position为默认的static，属于普通流）。所以伪元素的红色背景会直接覆盖article里的文本，这符合预期。

添加position: relative后的变化 #

• 当给元素设置relative（以及absolute/fixed/sticky，只要不是static）时，该元素会创建一个独立的堆叠上下文。
• 堆叠上下文的核心特性是：内部元素的堆叠层级只在当前上下文内生效，外部的元素（哪怕是父级的伪元素）无法穿透这个上下文去覆盖内部内容。
• 具体到你的代码：article创建自己的堆叠上下文后，它内部的文本会在这个上下文的层级体系里处于更高位置，而main::before属于main的堆叠上下文，两者分属不同的上下文，伪元素自然压不住article里的文本了。

额外验证（可选） #

如果给article加上z-index: -1，你会发现文本又被伪元素覆盖了——这是因为z-index会在当前堆叠上下文里调整层级，-1会把article内部内容的层级拉到上下文底部，此时父级伪元素就能覆盖它了。

内容的提问来源于stack exchange，提问作者JonSnowKnowsNothing