Z-Index 和伪元素：案例研究

在 CSS 中，z-index 属性指定元素的堆叠顺序页面，确定哪些元素出现在其他元素“前面”或“后面”。然而，当涉及到伪元素时，例如 ::before 或 ::after，它们与 z-index 的交互有时可能不那么简单。

考虑一个场景，我们使用::before 伪元素，如问题陈述中所述。我们打算将伪元素保留在 header 元素后面，但是当我们将 z-index 应用于 header 时，伪元素意外地来到了前台。

解释在于伪元素的本质元素本身。正如 CSS 规范中所述，::before 和 ::after 伪元素“与其他框交互，就好像它们是插入到关联元素中的真实元素一样”。这意味着伪元素有效地嵌套在父元素中。

当我们将 z 索引应用于标头元素时，它会创建一个新的堆叠上下文。堆叠上下文是一个 3D 空间，其中元素按照其 z 索引值的顺序呈现。同一堆栈上下文中的元素不能相互重叠。

在这种情况下，伪元素位于与标头元素相同的堆栈上下文中。由于它被视为嵌套元素，因此它不能浮动在标头后面，因为这需要它转义堆叠上下文。

要解决此问题，一种解决方案是在标头之前创建一个单独的元素，如建议的那样在答案中。该元素将充当标头和伪元素的容器，其 z 索引将正确地将标头堆叠在前面。