点击源误判本质是鼠标事件被透明或不可见元素拦截，实际点击目标未接收事件；需通过DevTools定位遮挡元素，检查层叠上下文与position属性，并用position:relative、提升上下文层级及pointer-events:none等方法修复。
点击源误判，本质是鼠标事件被上层“透明”或“不可见”元素拦截，而你看到的按钮/控件只是“露出来”，实际没收到点击。这不是 z-index 数值不够高，而是层叠结构和事件捕获路径出了问题。
确认是否真被遮挡
很多情况下，你以为点的是按钮，其实点的是它前面一层的元素——比如全屏遮罩、空 div、动画容器或带 transform 的父盒。这类元素可能：
设置了
position: fixed/absolute
+
z-index: 999
，但背景透明、无内容，肉眼不可见
用了
opacity: 0.99
或
transform: translateZ(0)
，意外创建了新层叠上下文，把子元素“锁死”在内部
是 JS 动态插入的，但没设
position
，默认 static，结果被后续定位元素覆盖（即使 DOM 顺序在前）
快速定位拦截源
打开 Chrome DevTools，用「选择元素」工具点一下出问题的区域，看高亮框套中的是哪个元素。再按以下顺序检查：
在
Computed
面板确认该元素的
position
是否为
relative/absolute/fixed/sticky
查看
z-index
计算值：若显示
auto
，说明未生效；若显示具体数字，再往上查它的父级是否创建了 stacking context
逐级向上看父元素的
transform
、
opacity
、
filter
等属性——只要其中一项触发了新层叠上下文，子元素的 z-index 就只能跟兄弟比，无法越级“突围”
修复核心三步法
不靠堆数值，靠理清层级归属：
给目标可点击元素显式加定位
：哪怕只是
，确保 z-index 生效
把需要交互的元素提到更高层叠上下文里
：比如按钮不该嵌在带 transform 的卡片内部，而应挂到 body 下或公共弹窗容器中
禁用不必要的指针穿透干扰
：对纯装饰性遮罩层，可加
；若需部分响应，再用子元素设
预防交互错位的设计习惯
从源头减少误判风险：
动态创建的 UI 元素（如 toast、快捷操作按钮），插入时立刻设置
position + z-index
，不要依赖默认样式
避免在模态框、下拉菜单等组件外层容器上滥用
transform
或
opacity < 1
用 CSS 变量统一管理层级，例如：
，让所有用户可操作元素都落在同一逻辑层
position: relativepointer-events: nonepointer-events: auto--z-interactive: 1100