理解 CSS 绘制顺序和重叠元素
在给定的场景中，我们观察到两个具有冲突背景的 div，一个与另一个重叠。然而，由于特定的 CSS 绘制顺序规则，重叠的 div 在底层 div 的背景和内容之间滑动。
根据 W3C 的 CSS 绘制顺序文档，具有堆叠上下文的元素的后代的绘制顺序（重叠的 div 由于其负边距而具有）如下：
-
从负数堆叠上下文z 索引： 首先，任何具有负 z 索引的子元素都会形成自己的堆叠上下文，并按降序绘制。
-
流入的非定位子元素： Next ，所有流入的非定位块级子级（在本例中包括第二个 div）都绘制在树中
-
流入块级子级的背景和边框：在每个子级中，绘制它们的背景和边框。重叠的 div 背景在此阶段绘制。
-
流内非定位内联子级： 绘制所有块级子级后，所有内联元素及其内容都按树顺序绘制.
-
从正 z 索引堆叠上下文： 最后，从具有正 z 索引的元素堆叠上下文z 索引按升序绘制。
重叠元素的含义
重叠 div 的具体问题是第二个 div 的背景（来自步骤3) 在其文本内容之前绘制（来自步骤 4）。这会导致文本出现在第一个 div 的内容和背景之间。
解决问题
要解决此问题，您可以使用以下方法之一：
-
为重叠的 div 设置一个正的 z-index： 这将确保其堆叠上下文在第一个 div 的背景之后绘制。
-
在重叠的 div 上使用 CSS 位置：相对： 这将为 div 及其后代创建一个新的堆叠上下文，允许您控制使用 z-index 的绘制顺序。
-
在重叠的 div 上添加透明层： 这将有效地将文本内容移动到“上方”图层，绕过重叠的 div 背景。
以上是为什么我的重叠 Div 的背景出现在其内容后面？的详细内容。更多信息请关注PHP中文网其他相关文章！
