z-index与层叠上下文基础
在深入探讨父子元素的层叠行为之前，我们首先需要理解z-index的工作原理及其与层叠上下文（stacking context）的关系。
1. z-index的作用：z-index属性用于控制定位元素（position属性值非static的元素，如relative、absolute、fixed、sticky）在Z轴上的堆叠顺序。值越大，元素越靠近用户，即显示在其他元素之上。
2. 层叠上下文（Stacking Context）： 层叠上下文是CSS中一个重要的概念，它决定了元素在Z轴上的堆叠顺序。一个层叠上下文可以包含其他层叠上下文，形成一个层叠上下文树。z-index的值只在其所属的层叠上下文内部才有意义。
元素创建层叠上下文的常见条件：
- position属性值为absolute、relative、fixed或sticky，并且z-index值不是auto。
- opacity属性值小于1。
- transform、filter、perspective、clip-path、mask等属性值非none。
- will-change属性值指定了任何会创建层叠上下文的CSS属性。
- display: flex或display: grid的子元素，如果z-index值不是auto。
父子元素层叠行为的误区
许多开发者在初次接触z-index时，可能会遇到一个常见的困惑：当父元素设置了z-index值，期望它能覆盖其子元素时，结果却发现子元素仍然显示在父元素之上。
问题示例： 考虑以下HTML和CSS代码，我们有一个白色的父div（.white）和一个红色的子div（.red）。.white设置了z-index: 1。
z-index 父子元素示例
在上述代码中，尽管.white元素设置了z-index: 1，但其内部的.red子元素仍然会覆盖.white的背景色部分。这似乎与直觉相悖。
立即学习“前端免费学习笔记（深入）”；
行为解析：
- .white元素由于设置了position: absolute和z-index: 1，因此创建了一个新的层叠上下文。
- .red元素作为.white的子元素，其渲染行为完全发生于.white所创建的层叠上下文内部。
- .white的z-index: 1决定的是整个.white层叠上下文（包括它自身以及它所有的子元素）相对于其兄弟层叠上下文的堆叠顺序。它不影响.red在.white内部的渲染顺序。
- .red元素设置了position: absolute，使其脱离了正常的文档流，并相对于其最近的定位祖先（即.white）进行定位。由于.red没有设置top、left等偏移量，它会默认从.white的左上角开始渲染，并因其背景色覆盖了.white的相应区域。
简而言之，一个子元素不能通过其父元素的z-index值来“跳出”并覆盖其父元素自身。子元素始终是父元素层叠上下文的一部分。
正确控制父子元素的层叠关系
要实现元素之间通过z-index进行层叠比较，它们通常需要满足以下条件之一：
- 它们是兄弟元素，并且都创建了自己的层叠上下文。
- 它们处于不同的层叠上下文，且这些层叠上下文是兄弟关系。
示例：将子元素变为兄弟元素
为了让.red和.white能够通过z-index进行直接的层叠比较，我们需要将它们从父子关系变为兄弟关系。
z-index 兄弟元素示例
行为解析： 在此修改后的代码中：
- .white和.red现在是兄弟元素。
- 它们都设置了position: absolute，因此各自创建了层叠上下文。
- .white的z-index: 1与.red的默认z-index: auto（在定位元素中通常等同于0）可以直接进行比较。
- 由于1 > 0，.white元素现在会显示在.red元素之上。
- 如果想让.red显示在.white之上，只需给.red设置一个更高的z-index值，例如z-index: 2。
注意事项
- 层叠上下文的形成条件： 务必牢记哪些CSS属性会创建层叠上下文。除了position和z-index，opacity、transform、filter等也常常是无意中创建层叠上下文的元凶。
- 调试工具： 在处理复杂的z-index问题时，浏览器开发者工具是你的好帮手。它可以帮助你检查元素的position、z-index以及是否创建了层叠上下文，从而更好地理解和调试布局。
- 避免过度使用z-index： 尽量保持z-index的使用简单明了，避免使用过大的数值或在不必要的地方设置z-index，这会增加维护难度。
总结
理解z-index与层叠上下文的关系是掌握CSS布局的关键。核心要点是：z-index作用于元素及其所有内容作为一个整体的层叠上下文，而非用于直接控制父子元素之间的层叠顺序。 子元素始终在其父元素的层叠上下文内部渲染，无法通过父元素的z-index值来“跳出”并覆盖父元素自身。要实现元素之间的z-index比较，它们必须是兄弟元素，或者处于不同的、可直接比较的层叠上下文中。通过清晰地理解这些规则，开发者可以更精确地控制页面元素的视觉堆叠顺序，构建出符合预期的复杂布局。
