ie6/7中z-index失效的根本原因是父容器未触发层叠上下文，必须给直接父级设position: relative以创建上下文，而非仅调高z-index值或依赖祖先定位。
IE6/7里z-index不生效，根本原因是层叠上下文没建对
不是z-index写错了，也不是数值不够大，而是父容器没触发新的层叠上下文。IE6/7对z-index的解析依赖「最近的已定位祖先」，如果父级是static（默认值），子元素的z-index直接被忽略。
常见错误现象：dropdown菜单被iframe或flash盖住；modal弹窗无法浮在header上方；明明写了z-index: 9999却还是沉底。
- 必须给**直接父级**加
position: relative（哪怕不需要偏移） - 不能只给最外层容器加，要逐级检查层级路径上所有可能参与堆叠的父元素
-
position: static的祖先会中断层叠上下文链，哪怕它上面有z-index也无效
为什么position: relative能修好，而不是absolute或fixed
relative是最安全的选择：它创建层叠上下文，又不改变文档流位置，不影响布局。用absolute或fixed容易引发定位偏移、宽高塌陷、响应式错位等问题。
使用场景集中在导航下拉、弹出提示、模态框等需要局部控制层级的组件。
-
relative不脱离文档流，不会导致父容器高度坍缩 -
absolute需配合top/left，稍不注意就偏出视口 -
fixed在IE6里根本不支持，且会脱离整个页面流
加了position: relative还不管用？检查这三个地方
很多同学加完就以为万事大吉，结果还是失效——问题往往藏在更上游。
- 父级是否被
overflow: hidden裁剪，导致子层叠区域被截断 - 是否存在
iframe，它在IE中是独立窗口层级，必须用wmode="transparent"降级处理 - 是否有多个
position: relative嵌套，但中间某一层漏了，导致上下文链断裂
示例：一个.dropdown始终被压在下面，查DOM发现它的父.nav-item没设定位，而祖父.header虽然有relative，但IE不认跨级继承——必须补上.nav-item { position: relative; }。
兼容性代价：别为了IE6/7破坏现代浏览器的渲染逻辑
给大量容器硬加position: relative，可能意外触发transform硬件加速、影响will-change判断，甚至让某些CSS动画变卡。
- 只对真实存在IE兼容需求的组件加，别全局
* { position: relative; } - 用条件注释或
@supports隔离IE专属规则，避免污染现代样式表 - 如果项目已放弃IE8以下，这个方案本身就不该出现
真正麻烦的从来不是加那行position: relative，而是得顺着DOM一层层往上翻，确认哪一环悄悄断掉了层叠上下文。这种问题没有银弹，只有手动排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
