z-index:1没效果，首要原因是元素未设置非static的position属性，浏览器直接忽略该声明；其次需检查父元素是否触发层叠上下文（如opacity<1、transform非none等），导致子元素z-index仅在内部生效。
z-index:1 为什么没效果？先看 position 是否生效
直接给元素写 z-index: 1 却没反应，90% 是因为没配 position。z-index 对 position: static（默认值）完全无效，浏览器会直接忽略它，开发者工具里该属性还会置灰。
必须显式设置为以下之一：
-
position: relative（最常用，不脱离文档流） -
position: absolute或position: fixed（脱离文档流，适合浮层） -
position: sticky（滚动吸附场景）
只改 z-index 不碰 position，等于没设。
父元素是不是悄悄创建了层叠上下文？
即使子元素 z-index: 9999，只要它的父元素自己创建了新的层叠上下文，这个 9999 就只在父容器内部起作用——它压不过同级另一个 z-index: 2 的兄弟元素。
立即学习“前端免费学习笔记（深入）”；
这些属性会让父元素“关起门来建小王国”（即创建层叠上下文）：
-
position: relative+z-index不是auto（比如z-index: 0或z-index: 1） -
opacity小于1（哪怕只是0.99） -
transform不为none（如transform: translateZ(0)） -
filter、will-change、isolation: isolate
用浏览器开发者工具的 Computed 面板检查父元素：如果看到 stacking context 被标记为 yes，就确认踩坑了。
z-index 值本身有没有被“矮化”？
z-index: 1 看似不小，但实际是否真能赢，取决于比较对象所处的层叠上下文层级。例如：
- A 元素：根级，
z-index: 1 - B 元素：嵌套在
position: relative; z-index: 0的父容器里，自身z-index: 1
此时 B 实际渲染层级 ≈ A 的父容器层级（z-index: 0），B 再大也出不去这个框。真正起作用的是父容器的 z-index，不是 B 自己的。
不要迷信数值大小；要查清楚：你调的是“谁的 z-index”，它和目标元素是否在同一个层叠上下文中。
HTML 结构和默认堆叠顺序也在偷偷影响结果
当两个元素没有创建新层叠上下文、且 z-index 都是 auto（或未设置）时，后写的元素天然盖在先写的上面——这和 z-index 无关，是 DOM 渲染顺序决定的。
容易被忽略的情况：
- 组件库（如 Ant Design）的
Drawer默认z-index: 1000，但如果你把它塞进一个opacity: 0.99的卡片里，那整个卡片都成了低层级上下文，Drawer再高也翻不出去 - 使用
fixed定位的弹窗，若其父元素有transform，也会被截断在那个上下文内
真正难调试的，往往不是 z-index 写错了，而是某一层祖先无意中用 opacity 或 transform 给它套了个“透明罩子”。
