z-index失效主因是跨层叠上下文比较，而非数值不足；需用devtools定位创建上下文的父级（如含opacity、filter等属性），统一层级或调整其样式。
定位元素遮挡导航栏，不是 z-index 值不够大，而是它根本没和导航栏处在同一个可比的层级里——z-index 只在同一个层叠上下文内有效，跨上下文时比的是父级的“地位”，不是子元素的数字。
为什么加了 z-index 还是被盖住
常见现象：给下拉菜单设了 z-index: 9999，但依然被轮播图、发光文字或弹窗遮住；开发者工具里看到它的计算值是 auto，或者父级明明没设 z-index 却“锁死”了子元素层级。
- 父级用了
opacity: 0.99、filter: blur(1px)、transform: translateZ(0)或will-change: transform→ 立刻创建新层叠上下文，子元素z-index只在内部生效 -
position: fixed导航栏没设z-index，默认处于基础层；而某个position: absolute的模块父容器恰好有opacity，结果整个模块“组团”浮到导航栏上方 - 第三方组件（如地图 SDK、视频播放器）内部自带样式，暗中触发了层叠上下文，你调自己的
z-index完全无效
怎么快速定位“截胡”的父级
打开 Chrome DevTools，选中被遮挡的导航栏（比如 .header），在右侧面板 Computed 标签页里搜 stacking context：
- 如果显示 “This element establishes a stacking context”，说明它自己就是边界 → 往上点父节点，找到第一个也标有该提示的祖先，就是问题源头
- 临时删掉可疑父级的
opacity、filter、transform，看遮挡是否立刻消失 - 把导航栏元素剪切出来，直接挂到
下测试 —— 如果这时不被遮了，基本能确认是层叠上下文导致
z-index 设多大才真有用
堆数字没用，反而容易和 UI 框架冲突（比如 Ant Design 弹窗用 1050，你设 9999 可能压住它的过渡动画层）。
- 先查项目里已有的层级定义，通常在
variables.css或设计系统文档中，例如：--z-nav: 100;、--z-modal: 1050; - 导航栏设
z-index: 101就够盖住普通内容，不需要9999 - 确保导航栏本身是定位元素：
position: fixed或position: relative，否则z-index直接忽略 - 避免混用
z-index: auto和z-index: 0：0会创建新层叠上下文，auto不会 —— 同一父级下行为完全不同
父级 overflow: hidden 导致内容被裁切
这和 z-index 无关，但常被误判为“遮挡”。当父容器设了 overflow: hidden（或 auto、scroll），而子元素是 position: absolute 且超出边界，浏览器会在绘制前直接裁掉它 —— 层叠顺序根本没机会参与。
- 检查被遮挡区域的父级是否带
overflow，特别是.wrapper、.container这类通用类 - 临时改成
overflow: visible验证；若必须隐藏溢出，考虑改用clip-path或调整子元素尺寸/定位 - 注意：
overflow: hidden+position: relative组合，也会隐式创建层叠上下文，进一步加剧层级混乱
真正卡住的点往往不在导航栏自己，而在它上面三层的某个 opacity: 0.99 或 transform —— 别只盯着 z-index 调，先用 DevTools 把 stacking context 链路摸清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
