z-index无效主因是元素未定位或父级创建新层叠上下文；需确保position为relative/absolute/fixed/sticky，且检查父元素是否因opacity
z-index 只对定位元素生效，非定位元素设了也无效。
为什么设置了 z-index 却没效果？
最常见原因是目标元素没有定位属性（position 值为 static，这是默认值）。z-index 是层叠上下文的排序依据，而层叠上下文只在 position 为 relative、absolute、fixed 或 sticky 时才可能创建。
- 检查元素是否写了
position: relative;（哪怕只是占位用） - 确认没有被父级的
transform、opacity 、<code>will-change等隐式创建新层叠上下文的属性“截断”了层级关系 - 浏览器 DevTools 中看 computed 样式，确认
z-index的 computed 值不是auto
z-index 数值比较的实际规则
数值本身不决定全局高低，只在同一个层叠上下文中起作用。父元素的 z-index 会“罩住”子元素，无论子元素数值多大。
- 若父容器 A 的
z-index: 10，子元素 B 设z-index: 999，B 仍整体低于另一个z-index: 11的同级容器 C - 想让 B 浮到 C 上方，必须提升 A 的
z-index至至少 12，或让 B 脱离 A 的层叠上下文（比如用position: fixed+top/left模拟位置） -
z-index: auto和z-index: 0在根层叠上下文中等效，但前者不会创建新层叠上下文，后者会
用 style 属性动态设置 z-index 的注意事项
内联样式优先级高，适合运行时控制，但要注意字符串拼接和单位缺失问题。
- JS 中赋值必须是字符串：
el.style.zIndex = "99"（不是99或"99px"） - 不要写成
el.style.zIndex = 99—— 虽然部分浏览器能自动转，但规范要求是字符串，IE 会直接失效 - 若用 CSS-in-JS 或模板语法（如 Vue 的
:style="{ zIndex: active ? 100 : 1 }"），确保绑定值为数字或字符串均可，框架内部会处理；但原生setAttribute('style', ...)必须手拼完整字符串，如"z-index: 100;"
真正难的不是设 z-index，而是理清当前有多少层叠上下文嵌套，以及哪些 CSS 属性（比如 filter、isolation: isolate）悄悄新建了上下文——这些往往比数值本身更影响最终堆叠结果。
