z-index: 9999 无效的首要原因是元素未设置 position（如 relative、absolute 等），导致浏览器忽略该属性；其次需排查层叠上下文（由 transform、opacity 等触发）、父容器 z-index 限制及 overflow: hidden 裁剪等问题。
z-index: 9999 无效，先看元素有没有定位
没加 position 的元素，z-index 直接被浏览器忽略。这是最常被跳过的前提。
常见错误现象：div 上写了 z-index: 9999，但背景、边框、文字全被盖住，DevTools 显示 position: static —— 这时再大的数字也没用。
- 临时加
position: relative（几乎不改变布局），立刻能验证是否是这问题 - flex 或 grid 子项虽可直接用
z-index，但仅限该容器内部生效，仍受祖先层叠上下文限制 - 移动端尤其容易被媒体查询覆盖：桌面端有
position: fixed，但@media (max-width: 768px)里漏写，导致回退成static
遮挡来自父级“结界”：检查 stacking context
你设了 z-index: 9999，但遮挡它的元素可能根本不在同一个 Z 轴空间里——父容器已经用 transform、opacity、filter 等属性悄悄建了个“结界”。
常见触发点：opacity: 0.99、transform: translateZ(0)、filter: blur(0)、will-change: transform、甚至 position: relative + z-index: 0。
- 打开 Chrome DevTools → 选中被遮挡元素 → «Computed» 面板搜
stacking context，显示 “Yes” 就说明它或某个父级已创建上下文 - 更直观的方法：切换到 «Layers» 面板，带分组边界的节点就是层叠上下文根节点
- 别猜，逐级点击父节点，在 «Computed» 里搜
transform、opacity、filter，找到第一个非默认值的就极可能是源头
父容器 z-index 再小，也锁死子元素的“天花板”
子元素 z-index: 9999，父容器 z-index: 10，兄弟容器 z-index: 100 —— 那么子元素永远压不过兄弟容器。这不是 bug，是 CSS 层叠规则的必然结果。
子元素的 z-index 只决定它在父容器内部的相对顺序，对外它只继承父容器在整个页面中的层级位置。
- 修复方向不是堆数字，而是提升父容器本身的
z-index（比如设为z-index: 1050） - 如果父容器必须保留
transform（如动画需要），那就给它同步加position: relative和足够高的z-index - 对 modal、tooltip 类组件，更彻底的解法是用 portal 把元素挂到
下，绕过所有祖先上下文
overflow: hidden 是下拉菜单和弹窗的隐形杀手
导航栏、头部容器加了 overflow: hidden + position: relative，等于主动给下拉菜单画了个牢笼：菜单即使 position: absolute + z-index: 9999，也只能在父容器边界内显示，超出部分被裁掉，视觉上就是“被遮挡”。
- 检查所有祖先容器是否同时满足：
position非static+overflow不是visible -
overflow: hidden在移动端 Safari 中还会导致position: fixed元素滚动时被意外裁切 - 替代方案：用
max-height+transition控制展开高度，而非靠overflow: hidden“堵漏洞”
transform: scale(1) 就足以让 z-index: 999999 归零。调试时盯着 «Layers» 面板比反复改数字管用十倍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
