为什么 `position:relative` 似乎像 `z-index` 一样影响堆叠顺序？

为什么你的代码表现出类似 Z-Index 的行为

在你的标记中， .container 元素有position:relative，你注意到了看起来模仿了 z-index 的效果。此行为源于 CSS 绘制顺序。

绘制顺序和定位

CSS 规范规定了图层在屏幕上绘制的顺序。如果没有position:relative，你的.container元素是“in-flow”的，并在绘制顺序的第4步中绘制。

相反，当你添加position:relative时，.container变得“定位”并属于绘画顺序的第 8 步。

树序绘画

在每幅画中步骤，元素按“树顺序”绘制。在您的情况下， .container 和 .mask 元素都是定位元素。由于两者都没有明确的 z-index 值，因此树顺序决定哪个绘制在顶部。

重新排序元素

在初始标记中， .mask 元素显示在层次结构中的 .container 之后。因此，当两个元素都定位后，.mask 将最后绘制，覆盖 .container。

但是，如果您重新排序元素，使 .container 位于 .mask 之后，则两个元素都将在步骤 8 下绘制，仍然按树顺序排列。在这种情况下，.container 将最后绘制，从而消除您之前观察到的“z-index 行为”。

以上是为什么 `position:relative` 似乎像 `z-index` 一样影响堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！