IE6–IE11中z-index失效主因是层叠上下文链在直接父级中断，必须给紧挨着的父元素显式设position: relative才能激活子元素z-index，而非数值过小或未定位。
IE6–IE11 中 z-index 失效，不是数值写小了，也不是没加 position，而是层叠上下文链在「直接父级」就断了——IE 不认跨级定位祖先，必须给**紧挨着的父元素**显式加 position: relative 才能激活子元素的 z-index。
为什么 IE 要求「直接父级」必须定位
IE6/7/8 的层叠上下文解析逻辑和现代浏览器完全不同：它只看子元素的**直接父元素**是否已定位（position: relative/absolute/fixed），如果父是 static（默认值），子元素的 z-index 直接被忽略，不管上面几层有没有设 z-index。
- 常见现象：
<div class="dropdown"> 始终被 <code><header></header>盖住，哪怕.dropdown写了z-index: 9999 - 查 DOM 发现：它的父级
<li class="nav-item">没设position，而祖父<ul class="nav"></ul>虽然有position: relative，但 IE 不认 - 临时验证：给
.nav-item加position: relative，立刻生效 -
overflow: hidden或overflow: auto的父容器，在 IE6–IE8 中可能截断层叠区域，导致子元素“沉底” -
float和position: static共存时，IE6/7 会彻底无视z-index（哪怕父级已定位） -
<iframe></iframe>、<select></select>、Flash 等原生控件在 IE 中拥有系统级窗口层级，z-index再高也盖不住，需加wmode="transparent"降级 - 多个
position: relative嵌套时，中间某一层漏设，链路就断——必须逐级检查，不能跳过 - 别全局写
* { position: relative }—— 会触发不必要的重排、影响will-change判断，甚至拖慢动画 - 只对真实存在 IE 兼容需求的组件加，比如
.dropdown、.tooltip、.modal-overlay的直接父容器 - 用条件注释或
@supports隔离（如@supports (-ms-ime-align: auto)判 IE），避免污染现代样式表 - 加完后检查是否引发高度塌陷：若父容器只有浮动子项，加
position: relative后仍需overflow: hidden或伪元素清除浮动 - 它们同样要求「直接父级」定位才能使子元素
z-index生效 -
transform: translateZ(0)在这些内核中极易创建意外层叠上下文，比 opacity 更危险 - 不要依赖
display: flex子项的隐式层叠能力——老 WebView 根本不认，必须显式加position - 验证时优先用真机 + Weinre 或 Chrome Remote Debugging，模拟器常有渲染偏差
哪些属性在 IE 中会意外破坏层叠链
除了父级漏掉 position，以下情况也会让 IE 忽略子元素 z-index：
怎么安全加 position: relative 而不破坏布局
用 position: relative 是最稳妥的修复方式，因为它不脱离文档流，也不改变元素位置。但要注意：
立即学习“前端免费学习笔记（深入）”；
移动端和旧 WebView 的兼容陷阱
Android 4.4 WebView、iOS Safari 9–12 等老内核，行为更接近 IE 而非 Chrome：
真正难的从来不是加那一行 position: relative，而是得顺着 DOM 一层层往上点开，确认哪一级悄悄漏掉了定位声明。这种问题没有通用配置，只能手动补全链路。
