理解 CSS z-index 基础
在深入探讨父子元素关系之前，首先要明确z-index的基本作用。z-index属性用于指定元素及其子元素的堆叠顺序。具有较高z-index值的元素会覆盖具有较低z-index值的元素。然而，z-index并非对所有元素都有效。它只对创建了层叠上下文（stacking context）的元素起作用。通常，这包括：
- position 属性值为 absolute, relative, fixed, 或 sticky 的元素。
- opacity 属性值小于 1 的元素。
- transform, filter, perspective 等属性值非 none 的元素。
- will-change 属性值为 opacity, transform 等的元素。
父子元素层叠行为的常见误区
一个常见的误解是，如果父元素设置了z-index，它就能覆盖其内部的子元素。例如，当一个父元素具有z-index: 1，而其子元素未设置z-index或设置为z-index: 0时，开发者可能会期望父元素能显示在子元素之上。然而，实际情况并非如此。子元素会继续覆盖父元素，因为它们是父元素“内容”的一部分。
考虑以下示例代码，其中一个白色父div包含一个红色子div：
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
position: absolute;
/* left: 650px; */ /* 示例中可以省略，让它在父元素内部 */
}
.blue {
background-color: blue;
position: absolute;
left: 1877px;
}
.yellow {
background-color: yellow;
}
.white {
background-color: white;
position: absolute;
left: 650px;
z-index: 1; /* 父元素设置了z-index: 1 */
}在这个例子中，即使.white元素设置了z-index: 1，其内部的.red子元素仍然会覆盖.white的一部分（如果它们位置重叠）。这是因为.red是.white的内容，z-index作用于.white元素及其所有内容作为一个整体，决定了它相对于其他兄弟元素的层叠顺序，而不是它内部子元素的层叠顺序。
层叠上下文 (Stacking Context) 机制解析
要理解这种行为，关键在于掌握层叠上下文的概念。当一个元素创建了层叠上下文时，它的所有子元素都会在这个上下文内部进行层叠。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 内部层叠： 子元素之间的层叠关系首先在父元素的层叠上下文中确定。
- 整体提升： 父元素的z-index值决定了整个层叠上下文（包括父元素本身及其所有子元素）在父级层叠上下文中的位置。
- 不可逾越： 子元素不能通过设置更高的z-index来跳出其父元素的层叠上下文，从而覆盖父元素的兄弟元素。它们只能在父元素所处的层叠级别内进行排列。
因此，当.white设置了z-index: 1时，它创建了一个层叠上下文。.red作为它的子元素，在这个上下文内部渲染。.white的z-index: 1意味着整个白色区域（包括红色子元素）将作为一个整体，在Z轴上位于其兄弟元素（如.blue或.yellow）的上方（如果它们的z-index较低）。但z-index: 1并不能让.white覆盖它自己的子元素.red。
正确的层叠控制方法
如果希望两个元素能够相互覆盖，并且通过z-index来控制它们的层叠顺序，它们通常需要满足以下条件之一：
- 是兄弟元素： 它们必须是同一个父元素的直接子元素。
- 属于不同的层叠上下文： 它们各自位于不同的层叠上下文中，且这些上下文之间存在层叠关系。
为了实现父元素（或与父元素在相同位置的元素）覆盖另一个元素，我们需要将它们变为兄弟关系。
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
left: 650px; /* 与.white位置相同 */
position: absolute;
/* z-index: 0; */ /* 默认或明确设置为较低值 */
}
.blue {
background-color: blue;
position: absolute;
left: 1877px;
}
.yellow {
background-color: yellow;
}
.white {
background-color: white;
position: absolute;
left: 650px;
z-index: 1; /* 父元素设置z-index: 1 */
}在这个修正后的示例中，.white和.red现在是兄弟元素。当它们都设置了position: absolute并位置重叠时，.white的z-index: 1将使其显示在z-index较低（或未设置z-index，默认为auto，通常被视为0）的.red元素之上。
移除父元素 z-index 的影响：
如果将上述兄弟关系示例中的.white元素的z-index移除，会发生什么？
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
left: 650px;
position: absolute;
}
.blue {
background-color: blue;
position: absolute;
left: 1877px;
}
.yellow {
background-color: yellow;
}
.white {
background-color: white;
position: absolute;
left: 650px;
/* z-index: 1; */ /* 移除z-index */
}在这种情况下，由于.white和.red都没有明确设置z-index，它们的层叠顺序将由它们在DOM中的顺序决定。通常，在DOM中靠后的元素会覆盖靠前的元素。因此，.red会覆盖.white，因为.red在HTML结构中位于.white之后。
注意事项与总结
- 层叠上下文是核心： 理解z-index的关键在于理解层叠上下文。z-index只在同一个层叠上下文内部或在比较不同层叠上下文时有效。
- position属性是前提： 只有position属性值非static的元素（或其他能创建层叠上下文的属性，如opacity
- 父元素包含子元素： z-index应用于父元素时，其作用范围是父元素及其所有子元素作为一个整体。父元素无法通过z-index来覆盖其自身的子元素。
- 兄弟关系是关键： 如果要通过z-index控制两个重叠元素的层叠顺序，它们通常需要是兄弟元素，或者位于不同的、可比较的层叠上下文中。
- 避免z-index滥用： 在复杂布局中，过度依赖z-index可能导致难以维护的代码。优先通过调整DOM结构或使用更合适的CSS布局（如Flexbox或Grid的order属性）来解决层叠问题。
掌握z-index与层叠上下文的交互机制，是构建复杂且可预测的CSS布局的重要一步。
