z-index失效通常因层叠上下文被意外创建，导致元素不在同一比较层级；需检查父级是否含opacity
绝对定位元素重叠顺序异常，通常不是 z-index 写错了，而是它根本没生效——z-index 只在定位元素（position 为 relative/absolute/fixed/sticky）且处于同一层叠上下文（stacking context）中才起作用。很多问题出在层叠上下文被意外创建，导致 z-index 在“不同世界”里互不干扰。
确认父容器是否意外创建了新的层叠上下文
以下 CSS 属性会让元素成为新的层叠上下文（即使它本身没写 z-index），从而隔离其子元素的 z-index：
- opacity 小于 1（如 opacity: 0.99）
- transform 不为 none（如 transform: translateZ(0)、translateX(1px)）
- will-change 设置了影响层叠的属性
- filter 不为 none（如 filter: blur(1px)）
- isolation: isolate
- mix-blend-mode 不为 normal
检查你绝对定位元素的任意上级（尤其是直接父级），是否加了上述任一属性。哪怕只是调试时临时加的 transform 或 opacity，都可能让 z-index “失效”。
确保 z-index 有比较基础：同属一个层叠上下文
如果两个 absolute 元素分别在不同的层叠上下文中（比如一个在 opacity: 0.99 的 div 里，另一个在 body 下），它们的 z-index 数值再大也互不影响。此时要：
立即学习“前端免费学习笔记（深入）”；
- 把需要控制层级的元素“提级”到同一祖先下（比如都挂到 body 或同一个 position: relative 容器下）
- 移除不必要的层叠上下文触发属性（尤其注意父级的 opacity 和 transform）
- 必要时给共同父容器显式设置 z-index 和 position: relative，统一管理子元素层级
检查 z-index 值是否被继承或重置
z-index 不会继承，但它的生效依赖父级层叠上下文的层级。常见陷阱：
- 父元素没有定位（position: static），则子元素的 z-index 相对于最近的定位祖先，而非你预期的容器
- 父元素虽有 position，但 z-index 为 auto（默认值），它不会创建层叠上下文，子元素仍向上找
- 使用了 flex 或 grid 容器，其子项即使 absolute 定位，z-index 依然有效，但需注意容器自身是否成了层叠上下文
快速验证与调试技巧
- 浏览器开发者工具中，选中元素 → 查看 Computed → 搜索 "stacking"，观察是否显示 "Creates stacking context"
- 临时给疑似干扰的父元素加上 outline: 1px solid red，再删掉可疑 CSS，看重叠关系是否恢复
- 用 z-index: 9999 测试仍无效？大概率是层叠上下文隔离了——先解决“在哪比”，再解决“谁更高”
