【CSS篇】z-index属性在什么情况下会失效？z-index 是 CSS 中用于控制元素堆叠顺序（层叠上下文）的重要

z-index 是 CSS 中用于控制元素堆叠顺序（层叠上下文）的重要属性。但它并不是“万能”的，有很多边界条件会导致它“看似无效”。

必须设置 position 为非 static 值
- z-index 只对定位元素有效。
- 合法值：relative, absolute, fixed, sticky
- ❌ 错误示例：
```
div {
  z-index: 999;
}
```
元素之间必须是 兄弟关系或重叠
- z-index 只在同一层叠上下文中起作用。
- 不同父级、不同层叠上下文的元素不能直接比较 z-index。

🚫 `z-index` 失效的常见情况及解决办法

场景	原因	解决方法
1. 父容器限制了子元素的层级	子元素设置了很高的 `z-index`，但父元素没有形成独立的层叠上下文，导致被外部元素覆盖	给父元素也设置合适的 `z-index` 或确保其不干扰子元素层级
2. 元素未设置 `position` 属性	`z-index` 必须配合 `position` 使用	添加 `position: relative` 或其他非 `static` 值
3. 浮动 (`float`) 和 `z-index` 混用	`float` 的元素不会进入层叠上下文	改用 `display: inline-block` 或 Flex/Grid 布局
4. 不同层叠上下文之间的比较	父元素 A 的 `z-index: 1000`，子元素 B 的 `z-index: 9999`，但被另一个父元素 C 的子元素 D（`z-index: 1`）覆盖	`z-index` 只在同一个层叠上下文中有效。应统一调整父级层级
5. 使用了 `transform`、`filter`、`opacity < 1` 等属性	这些属性会创建新的层叠上下文，影响 `z-index` 行为	注意这些属性对层叠结构的影响，合理安排 DOM 结构
6. 使用了 `will-change` 或硬件加速相关属性	导致浏览器开启 GPU 加速渲染，可能改变默认层叠行为	避免滥用，仅在需要时使用

<div class="parent">
  <div class="child">我在父元素里面</div>
</div>
<div class="other">我盖住了你</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  z-index: 9999; /* 无效？ */
}

.other {
  position: absolute;
  z-index: 1;
}

✅ 解决方式：

.box1 {
  float: left;
  z-index: 999;
}
.box2 {
  position: absolute;
  z-index: 1;
}

.box1 不会被 .box2 覆盖，但它的 z-index 并不会生效。

✅ 解决方式：