z-index失效首要原因是父容器创建层叠上下文，使子元素z-index仅在局部生效；需用DevTools检查stacking context，临时注释transform/opacity验证，并确保同级absolute元素处于同一上下文且均设具体数值。
z-index 失效的首要怀疑对象是父容器创建了层叠上下文
两个 position: absolute 元素即使同属一个父容器，只要该父容器触发了新的层叠上下文（stacking context），它们的 z-index 就只在内部比较，无法真正“交替”覆盖对方——因为它们根本不在同一个层级空间里。常见触发条件包括：transform 非 none、opacity 小于 1、filter、will-change、isolation: isolate，甚至父元素自己设了 z-index 且 position 非 static。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools，选中父容器，在 «Computed» 面板搜索
stacking context，显示 “Yes” 即确认它已隔离子元素 - 临时注释掉父容器的
transform: translateZ(0)或opacity: 0.99，看两个子元素是否立刻能按z-index正常交替 - 若必须保留这些样式，就把两个目标元素提到更高一级、不触发层叠上下文的容器下（比如直接挂到
body或一个空div上）
兄弟元素 z-index 交替的前提：必须处于同一层叠上下文且显式声明数值
即使父容器没创建新上下文，如果其中一个子元素的 z-index 是 auto（即未设置或设为 initial），它就不会参与数值比较；此时层叠顺序退化为 DOM 顺序（后写的盖前面的），看起来就像“无法交替”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保两个元素都设置了
position: absolute（或relative/fixed）和具体整数z-index，例如z-index: 10和z-index: 11 - 避免混用
z-index: auto和数字值；更别用z-index: -1，它可能让元素沉到父容器背景之下而不可见 - 不要依赖 CSS 优先级来控制谁在上——
.a { z-index: 10 }和.b { z-index: 11 }的生效与否，只取决于计算后的值，跟选择器权重无关
JS 动态切换 z-index 时 class 比 style.zIndex 更可靠
用 element.style.zIndex = '20' 直接赋值，容易被 CSS 文件中带 !important 的规则覆盖，也难同步状态（比如点击一次升层，再点一次降层，逻辑易错）。更重要的是，它绕过了浏览器对层叠上下文的静态分析路径，有时会触发意料外的重排。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义两个 class：
.layer-up { z-index: 20; }和.layer-down { z-index: 10; } - 用
element.classList.toggle('layer-up')切换，既清晰又可预测 - 若需批量控制，把层级逻辑抽成数据驱动：
data-layer="modal"+ CSS 自定义属性--z-modal: 1000;
absolute 元素必须共享定位参照容器才能有效比 z-index
如果一个 absolute 子元素的最近已定位祖先（nearest positioned ancestor）是父容器 A，另一个却是父容器 B（哪怕视觉上都在同一区域），那它们压根不在同一个坐标系里，z-index 比较无意义——就像两个不同窗口里的程序，彼此看不见对方的窗口层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查两个元素的
getComputedStyle(element).position和offsetParent，确认它们的定位基准是否一致 - 统一给父容器加
position: relative（哪怕只是空壳），强制成为共同参照 - 避免嵌套过深：比如
.parent > .card > .tooltip中，.tooltip的参照是.card，而非.parent，容易误判层级关系
z-index 更省时间。 
