可点击区域失效主因是CSS层级遮挡而非JS绑定错误；需检查目标元素是否参与层叠计算及是否被父级层叠上下文隔离，z-index仅对定位元素生效，opacity/transform/filter等属性会创建新层叠上下文。
可点击区域失效，90%不是 JavaScript 绑定错了，而是 CSS 层级把点击事件吃掉了；核心要查两件事：目标元素有没有参与层叠计算、它是否被锁在某个父级的“小房间”里。
元素没定位，z-index 就是摆设
浏览器只认 position: relative、absolute、fixed 或 sticky 的元素才看 z-index；position: static（默认值）下写 z-index: 9999 也完全无效。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜
position，确认值不是static - 动态插入的按钮（如
document.createElement('button')）必须显式加style.position = 'relative'，不能只设zIndex - Vue/React 中 class 切换可能覆盖
position，建议在mounted或useEffect里补全定位声明
祖先元素悄悄建了“结界”，z-index 失效
只要某个父级满足以下任一条件，它就创建了新的层叠上下文（stacking context），子元素的 z-index 只能在它内部比大小，跨不出去：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)） -
will-change设为transform或opacity isolation: isolate
调试方法：在 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页看 «Stacking context» 是否突然变成 Yes；临时删掉可疑属性，看点击是否恢复。
伪元素和遮罩层也在挡路
::before 和 ::after 默认参与事件流，哪怕只是画个边框或阴影，也会稳稳盖住下面的按钮。别指望 z-index: -1 能解决——在已有层叠上下文的父容器里，它根本不起作用。
- 给视觉装饰类伪元素直接加
pointer-events: none，例如：.overlay::before { pointer-events: none; } - 如果伪元素需要
:hover效果但又不想拦截点击，拆成两个元素：一个纯视觉 + 一个透明但pointer-events: auto的空层 -
opacity: 0或visibility: hidden依然吃点击；只有display: none或pointer-events: none才真正释放事件流
移动端和 iOS Safari 的特殊坑
iOS Safari 对 body 和 html 的渲染限制极严：
-
body { overflow: hidden }→ 导致position: fixed元素滚动时被裁切 -
html { transform: translateZ(0) }→ 整个文档变成一个层叠上下文，“全局最高”的弹窗也只在它内部排第一 - 动态浮层（如 toast、picker）常漏写
position: fixed或position: absolute，只设z-index不够
验证方式：打开 Safari Web Inspector，逐级点击 html→body→根容器，看 «Computed» 里 position 和 z-index 是否按预期生效。
最麻烦的不是 z-index 数值太小，而是你根本没意识到某一层父元素已经把它关进了独立上下文——这种情况下调再大的数也没用，得先破“结界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
