CSS 绘制顺序

通常，当我看到“绘制顺序”或“堆叠上下文”之类的术语时，我的大脑会开始关闭，我的眼睛会变得模糊。并不是说我的大脑通常不会比平时更多地关闭，但那是另一个主题，留待以后再谈。

Igalia 的 Martin Robinson 在他的 博文中讨论了这些概念，他使用了一个非常容易理解的例子，即使对我来说也是如此。他从两个带有负边距的重叠框开始。

<div class="blue box">1</div>
<div class="green box">2</div>

然后，他介绍了一个作为绿色框子元素的第三个框。绿色框的 z-index 设置为 -1。正如您预期的那样，绿色和黄色框都堆叠在蓝色框下方。

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
  <div class="yellow box">-1</div>
</div>

这就是我的大脑开始融化的地方。如果绿色框的 z-index 保持不变，为 -1，但我们给它的子元素一个巨大的值，比如 1000，情况看起来……完全一样。

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
  <div class="yellow box" style="position: relative; z-index: 1000;">1000</div>
</div>

我相信你们中的许多人已经猜到（或者干脆知道）为什么蓝色框仍然在最上面，即使更改黄色框的 z-index 意味着它应该在最上面，但我肯定没有。Martin 在 CSS2 规范 的深处，附录 E 中找到了技术答案，他慷慨地链接了它——否则，我相信我永远找不到它。

我们从附录 E 中了解到，堆叠上下文是页面元素的原子绘制集合。这意味着什么？简单地说，这意味着堆叠上下文中的元素作为一个单元一起绘制，而堆叠上下文外部的元素永远不会绘制在它们之间。拥有一个活动的 z-index 是 CSS 中触发堆叠上下文创建的情况之一。有没有办法调整上面的示例，以便第三个元素属于与前两个元素相同的堆叠上下文？答案是，我们必须将其从第二个元素创建的堆叠上下文中移除。

所以，是的。只要黄色框是绿色框的子元素，这两个框就会形成一个堆叠上下文，蓝色框不属于该上下文。要使黄色在蓝色上面，需要将其从绿色的堆叠上下文中移除。

这就是 Martin 文章的核心内容，但他深入探讨了这个问题，值得一读。如果您读了这篇文章，您将看到堆叠顺序是如何导致一些真正的 CSS 技巧的。

这不是我们第一次链接证明 z-index 不是一个公平的竞争环境，所以我要尝试记住这一点，以便在下次（不可避免地）与堆叠元素作斗争时使用它。

直接链接 →