为什么负边距的 Div 看起来会在另一个 Div 的内容和背景之间滑动？

重叠元素的内容重叠：理解谜题

简介

在这种情况下，我们有两个没有任何内容的 div复杂的样式（简单的背景颜色）。我们通过应用负的 margin-top 来操纵第二个 div 与第一个 div 重叠。然而，我们并没有看到一个元素与另一个元素完全重叠，而是发现第二个 div 在第一个 div 的内容和背景之间滑动，表现出意想不到的行为。

绘画顺序

要理解这种行为，我们需要深入研究浏览器中绘画顺序的复杂性。堆叠上下文中元素的绘制顺序遵循预定义的顺序：

1. 元素的背景颜色，即使它是根元素。
2. 元素的背景图像，即使它是它是根元素。
3. 元素的内容，例如文本和图像，从下到上绘制top.
4. 子元素的背景和边框。

解释重叠

在我们的示例中，当第二个 div 与第一个 div 重叠时，会发生以下绘制顺序：

1. 第二个 div 的背景色绘制在第一个 div 的背景。
2. 第一个 div 的内容被绘制。
3. 第二个 div 的内容被绘制在第一个 div 的内容之上。

自第一个 div 的内容在第二个 div 的背景之前绘制，文本似乎位于绿色背景上方，从而产生第二个 div 在两者之间滑动的错觉

更改行为

虽然默认绘制顺序可能会导致这种情况，但可以通过将重叠元素的不透明度设置为值小于 1。这会在内容绘制步骤之前触发不透明度绘制步骤，确保重叠元素的背景出现在其下方内容。

在我们的示例中，向第二个 div 添加 opacity: 0.9999 会产生预期的行为，其中绿色背景完全覆盖第一个 div 的内容。

参考

CSS绘制顺序的详细解释可以参考W3C官方文档：

https://www.w3.org/TR/css-backgrounds-3/#box-painting

以上是为什么负边距的 Div 看起来会在另一个 Div 的内容和背景之间滑动？的详细内容。更多信息请关注PHP中文网其他相关文章！