为什么 CSS 内容重叠但背景不重叠？

内容重叠，但背景不重叠

在 CSS 中，元素的绘制顺序遵循特定的层次结构。当一个元素与另一个元素重叠时，重叠元素的内容将呈现在顶部。但是，重叠元素的背景不受影响。相反，它保持在其初始位置。

要了解此行为，请务必参考 [W3C 绘制顺序文档](https://www.w3.org/TR/css-backgrounds-3 /#绘画顺序）。它概述了以下顺序：

1. 父元素的背景颜色
2. 父元素的背景图片
3. 子元素的内容（不包括背景和边框）
4. 子元素的背景颜色
5. 子元素的背景图片元素
6. 子元素的边框

在您提供的代码中，“.box”元素的背景在第4点中绘制。“.bottom”元素的背景也在第 4 点中绘制。但是，直到下一个嵌套元素（这是此元素中的根元素）的第 3 点才绘制“.bottom”元素（文本）的内容。

因此，“.bottom”元素的内容看起来位于“.box”元素的背景前面，因为文本是在“.box”元素的背景之后绘制的但在“.bottom”元素的背景之前。

要修改此行为，您可以对“.bottom”元素应用低不透明度，这会将其内容按堆叠顺序放置在背景之前和“.box”元素的边框。

以上是为什么 CSS 内容重叠但背景不重叠？的详细内容。更多信息请关注PHP中文网其他相关文章！