z-index不生效主因是元素未进入同一层叠上下文；需确保目标元素已定位，排查opacity<1、transform非none等隐式创建上下文的属性，并用DevTools检查stacking context。
z-index 不生效，99% 不是数值太小，而是元素压根不在同一个比较场里。
为什么写了 z-index 还是被盖住
最常见的情况是：两个本该比高低的 position: absolute 元素，分别嵌套在不同父容器中，而其中某个父容器悄悄触发了新的层叠上下文（stacking context），把子元素的 z-index 锁死在局部范围。
- 用 Chrome DevTools 选中目标元素 → «Computed» 面板搜
stacking context，显示 “Yes” 就说明它或某个祖先已创建新上下文 - 高频触发器包括：
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)、will-change: transform、isolation: isolate，还有position: relative+z-index: 0（哪怕只是 0） - 临时给可疑父容器加
opacity: 1 !important或transform: none !important，看遮挡是否消失——这是最快验证方式
position: absolute 元素突然飞到左上角
这不是 top 和 left 写错了，而是它没找到定位参考系。它会向上查找**最近的非 static 定位祖先**；如果全都是默认 position: static，就直接相对于 viewport 定位。
- DevTools 中选中该元素 → «Computed» 面板找
Containing block字段，看它实际绑定的是哪个节点 - 在 Elements 面板里从父节点开始逐级点开，确认是否有节点设置了
position: relative、absolute或fixed - 若预期父容器没设定位，就给它加
position: relative（无需写top/left），让它成为合法锚点
iOS Safari 中 z-index + transform 组合失效
这个坑特别隐蔽：只要父容器用了 transform（哪怕只是 translateZ(0)），又没显式声明 z-index，其子元素即使设了 z-index，也可能被错误渲染。
立即学习“前端免费学习笔记（深入）”；
- 稳妥解法：在触发
transform的父容器上，**同时加position: relative和z-index: 0** - 避免只靠
transform: translateZ(0)强制硬件加速却不设z-index - 测试必须用真机，模拟器常无法复现该问题
怎么让 z-index 管理不翻车
硬写 z-index: 9999 是在给未来埋雷。真正可维护的方式是语义化分层 + CSS 自定义属性统一管理。
- 同层叠上下文中，相邻功能层级建议间隔至少 10，例如：
--z-tooltip: 500、--z-modal: 1000、--z-fullscreen-overlay: 2000 - 第三方 UI 库（如 Ant Design、MUI）通常自带
z-index规范，你的自定义值最好避开它们的默认范围（比如 MUI Modal 默认是 1300） - SSR 或 Shadow DOM 场景下，样式作用域可能重置
z-index计算，需在组件根节点显式声明定位和层级
真正复杂的地方不是数字本身，而是层叠上下文的嵌套深度和隐式触发条件——一个 opacity: 0.99 或 will-change: transform 就可能让整套 z-index 归零。调试时别只盯着子元素改值，得往上查两层父节点有没有“结界”属性。
