根本原因是元素未真正定位或被父层叠上下文隔离：若position仍为static，z-index被忽略；若父容器含opacity/transform等属性，则创建独立层叠上下文，子元素z-index无法跨上下文比较。
两个 position: absolute 元素重叠时，底层元素点不了，不是 z-index 没设对，而是它根本没“资格”参与层级竞争——要么没定位，要么被父容器的层叠上下文锁死了。
为什么设置了 z-index 还是点不到？
最常踩的坑是：目标元素本身 position 仍是 static（默认值），或者被祖先样式重置了。浏览器直接忽略它的 z-index，连计算都不算。
- 用 DevTools 的 «Computed» 面板确认
position实际值是不是absolute、relative或其他非static值 - 检查是否被 CSS-in-JS、UI 库或重置样式表悄悄覆盖，比如
.btn { position: static !important; } -
z-index: auto等价于没写，必须显式设为整数（如z-index: 1）才生效
父容器偷偷创建了层叠上下文怎么办？
只要父元素加了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px) 或 will-change: transform，就会强制生成新层叠上下文——子元素的 z-index 只在它内部比大小，跨不出去。
- 在 Chrome DevTools 的 «Layers» 面板里搜索 “stacking context”，标为 Yes 的节点就是“结界”源头
- 临时删掉父级的
transform或opacity，看点击是否恢复；若恢复，就坐实是它干的 - 不想删效果？把需要交互的元素提级到该父容器之外，或统一收进一个「干净」的
position: relative容器下
同级 absolute 元素怎么稳控谁在上？
当两个元素同属一个层叠上下文（比如都直接在 <body> 下，或共用同一个 position: relative 父容器），堆叠顺序只取决于两件事：
立即学习“前端免费学习笔记（深入）”；
- 显式
z-index数值：大的盖小的（z-index: 2盖z-index: 1） - 数值相等或都没设：按 HTML DOM 顺序，后出现的盖前面的
- 负值有效：
z-index: -1会让元素沉到父容器背景色之下（如果父容器有背景，它就不可见）
别信“写在后面样式就生效”——CSS 优先级不决定层叠顺序，z-index 值和 DOM 顺序才决定。
数值该设多大才不翻车？
写 z-index: 999999 解决不了问题，反而让后续弹窗、Tooltip、第三方组件不敢设值，一加就冲突。
- 按功能分段管理：
z-header: 100、z-dropdown: 200、z-modal: 1000、z-toast: 1100 - 留足间隙（比如每档差 100），方便中间插一层新组件
- 真正要管的是结构层级关系，不是数字本身——同一模块内的元素，用
1、2、3就够清晰
移动端尤其要注意：iOS Safari 对 transform 和 will-change 更敏感，父级一加就容易意外截断子元素层级，调试时优先查 Layers 面板。
