理解z-index层叠顺序

Question

我对使用 z-index 决定堆叠顺序有些困惑。

我不是很清楚浏览器如何处理带有 position 属性的元素和没有此属性的元素。

是否有一般规则来决定元素的堆叠顺序，无论它是否具有显式定位的元素？ 欢迎提供不同情况的示例。总的来说：

1. 具有设置位置和未设置位置的混合兄弟 <div>。
2. 嵌套的 <div> 和具有设置位置和未设置位置的兄弟 <div> 混合。

- Kuan

---

你难道不理解“z-index”或“position”的概念吗？ 你可以尝试用实际代码来解释你的例子。 - Phaze Phusion

相关链接：https://dev59.com/TlQI5IYBdhLWcg3w-Qhi - Temani Afif

Answer 1

CSS z-index 属性基础知识

一个简单的概念

z-index 属性基于一个简单的概念：具有较高值的元素将位于具有较低值的元素前面，沿着 z 轴。因此，如果你将 z-index: 1 应用于 div.box1，并且 div.box2 具有 z-index: 0，那么 div.box1 将覆盖 div.box2。

在 z 轴方面，它指的是三维平面上的深度。在计算机上，它可以被解释为物体向你移动和远离你的平面。（了解更多关于 笛卡尔坐标系 的信息。）

^{来源：维基百科}

---

z-index属性只对定位元素生效

除非你处理的是弹性盒子或网格项目，否则z-index属性仅对定位元素生效。这意味着你可以在具有position: absolute、position: relative、position: fixed或position: sticky的元素上使用z-index。如果元素具有position: static（默认值）或其他定位方案，如float，那么z-index将不起作用。

正如注释所述，尽管CSS 2.1中定义的z-index仅适用于定位元素，但flex项和网格项即使position为static也可以创建堆叠上下文。

4.3. 弹性项目的 Z 轴排序

弹性项目的绘制方式与内联块完全相同，只是使用修改后的文档顺序代替原始文档顺序，并且除了auto以外的z-index值即使position为static，也会创建一个堆叠上下文。

5.4. Z 轴排序： z-index 属性

网格项的绘制顺序与内联块完全相同，只是使用修改后的文档顺序代替原始文档顺序，并且除了auto以外的z-index值即使position为static，也会创建一个堆叠上下文。

这是关于非定位的弹性项目中 z-index 的演示：https://jsfiddle.net/m0wddwxs/

---

堆叠上下文

一旦元素被定位并应用了 z-index，就会创建一个堆叠上下文。

(另请参见：创建堆叠上下文的完整情况列表。)

堆叠上下文是管理定位元素和其后代的一组规则，这些规则控制子元素在 堆叠顺序 中的位置和属性影响的范围。

实质上，堆叠上下文将 z-index 的范围限制在元素本身，其子元素不能影响另一个堆叠上下文中元素的堆叠顺序。

如果您曾尝试逐渐增加 z-index 值，但发现该元素从未移至前面，则可能正在尝试覆盖处于不同堆叠上下文中的元素。

具有共同父元素的元素组成了一个层叠上下文，它们可以一起向前或向后移动。全面理解层叠上下文对于真正掌握 z-index 和层叠顺序的工作原理至关重要。

每个层叠上下文都有一个单独的 HTML 元素作为其根元素。当在一个元素上形成新的层叠上下文时，该层叠上下文将所有子元素限制在层叠顺序中的特定位置。这意味着，如果一个元素包含在层叠顺序底部的层叠上下文中，即使使用十亿的 z-index，也无法使其出现在不同层叠上下文中层叠顺序更高的另一个元素的前面！

~ Z-Index 的秘密

---

堆叠顺序

CSS在页面布局时遵循一种堆叠顺序。当没有指定z-index时，以下是从最远到最近的堆叠规则：

1. 根元素的背景和边框
2. 非定位、非浮动块级元素，按它们在源代码中出现的顺序排列
3. 非定位浮动元素，按它们在源代码中出现的顺序排列
4. 行内元素
5. 定位元素，按它们在源代码中出现的顺序排列

如果应用了z-index属性，则会修改堆叠顺序：

1. 根元素的背景和边框
2. z-index小于0的定位元素
3. 非定位、非浮动块级元素，按照它们在源代码中出现的顺序
4. 非定位浮动元素，按照它们在源代码中出现的顺序
5. 内联元素
6. 按照它们在源代码中出现的顺序排列的定位元素
7. z-index大于0的定位元素

来源: W3C

---

底线：一旦您理解了堆叠上下文，z-index 就很容易理解了。

---

要了解 z-index 的实际应用示例，请参见：如何使用z-index！

有关简短但高度信息化的文章，其中包括有关 z-index 的说明（包括 opacity 如何影响堆叠顺序），请参见：关于Z-Index没有人告诉你的事情

要完整了解 z-index，包括许多示例和插图，请参见：MDN理解CSSz-index

要深入了解堆叠上下文，请阅读：W3C关于堆叠上下文的详细描述

- Michael Benjamin