为什么重叠的 HTML 内容有时不会遮挡底层背景？

导致内容重叠问题的原因是什么？

当两个元素在 HTML/CSS 中重叠时，内容并不总是被重叠元素的背景覆盖。发生这种情况是因为 CSS 渲染模型中指定的特定绘制顺序。

CSS 绘制顺序

CSS 绘制顺序决定了元素在网页上视觉呈现的顺序。它由一组规则定义，这些规则指定首先绘制哪些内容层。这是一个简化的概述：

1. 根元素的背景：根元素（）的背景颜色覆盖整个画布。
2. 子元素的背景：如果子元素是块元素（例如，
   )，其背景颜色和图像绘制在根元素背景的顶部，覆盖元素的整个宽度和高度。
3. 边框：子元素的边框元素被绘制在其背景之上。
4. 文本内容：最后，子元素的文本内容被绘制在

提供的示例中的问题

在给定的示例中，我们有两个元素：

1. .box: A
分区>红色背景。
2. .bottom：另一个
   ；使用绿色背景和负边距，使其与 .box 重叠。

   根据绘制顺序：

   1. 的白色背景首先绘制，覆盖整个页面。
   2. 接下来绘制.box的红色背景，由于它是块元素，所以它覆盖了元素的整个宽度和高度。
   3. 然后绘制 .bottom 的绿色背景，但由于负边距，它在 .box 的文本内容与其背景之间滑动。
   4. 两个元素的文本内容是最后要绘制的。

   结论

   观察到的行为是预定义的 CSS 绘制顺序的结果，该顺序优先考虑文本内容渲染而不是重叠元素的背景图像或颜色。