ie6/7中z-index失效的根本原因是层叠上下文未正确建立，必须给dom路径上第一个已定位祖先（如position: relative）显式设置z-index（哪怕为1），而非仅调高子元素z-index值。
z-index 在 IE（尤其是 IE6/7）中无效，根本不是数值写小了，而是浏览器对层叠上下文的解析逻辑和现代浏览器完全不同——它不按“谁的 z-index 大谁在上”算，而是按 DOM 路径上**第一个已定位祖先**的 z-index 来决定整个子树的层级上限。
IE6/7 中 z-index 为什么只看“第一个 relative 父级”
IE6/7 的层叠模型里，每个已定位元素（position: relative、absolute、fixed）如果没显式设 z-index，就默认是 auto，而 auto 在 IE 里等价于“不参与跨上下文比较”，直接把整棵子树锁死在父级的层级之下。
常见错误现象：
- 下拉菜单被 iframe 或表单控件盖住，哪怕写了
z-index: 9999 - 模态框明明在最外层，却沉在 header 下面
- 父容器加了
position: relative，但子元素的z-index完全没反应
实操建议：
- 必须给**DOM 路径上第一个
position不为static的祖先**显式设置z-index（哪怕只是z-index: 1） - 不能只靠最深层子元素硬调高值；也不能只给祖父级设，漏掉中间某一层
- 用开发者工具逐级检查，找到那个“没设 z-index 的 relative 父级”，补上即可
为什么一定要用 position: relative 而不是 absolute 或 fixed
position: relative 是修复 IE 层级问题时唯一安全的选择，因为它创建层叠上下文的同时，完全不改变文档流位置和尺寸计算。
实操建议：
-
position: absolute容易导致定位偏移、宽高塌陷，尤其在响应式布局中会连锁出错 -
position: fixed在 IE6 中根本不支持，且会脱离整个页面流，让父容器失去高度控制 - 即使只是“为了触发上下文”，也优先写
position: relative; z-index: 1;，别加top/left偏移
加了 position: relative 还不管用？排查这三个地方
很多同学加完就以为搞定，结果还是被压着——问题往往藏在更上游或更隐蔽的样式里。
实操建议：
- 检查该父级是否被
overflow: hidden截断，导致子层叠区域不可见 - 确认页面是否有
iframe：IE 中 iframe 是独立窗口层级，必须加wmode="transparent"才能被 CSS 层级控制 - 是否存在多层
position: relative嵌套，但中间某一层漏了z-index，导致上下文链断裂（比如.nav→.nav-item→.dropdown，漏了.nav-item的z-index）
现代项目里要不要还管这个？
如果项目已明确放弃 IE8 及以下版本，那这套方案本身就不该出现。但只要还有真实 IE6/7 兼容需求（比如政企内网系统），真正麻烦的从来不是加那一行 position: relative，而是得顺着 DOM 一层层往上翻，确认哪一环悄悄断掉了层叠上下文——而且这个断点，往往不在你正在调试的组件里，而在它上面三五层的某个“看起来无关紧要”的容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
