绝对定位元素点不了，先查pointer-events是否被设为none；再检查上层透明遮罩是否拦截点击、z-index是否因层叠上下文失效、元素是否有有效宽高及热区，最后确认事件绑定时机。
绝对定位元素点不了，先查 pointer-events 是否被设为 none
不是所有“点不中”都怪 z-index——最常被忽略的是 pointer-events: none 被意外继承或显式设置。它可能来自父容器（比如弹窗遮罩层）、某个伪元素（::before），甚至 UI 框架的默认样式。
快速验证方式：
在开发者工具中选中目标元素 → 切到 “Computed” 面板 → 搜索 pointer-events。如果显示值为 none（哪怕带删除线），就说明它或其祖先已禁用鼠标事件。
- 临时修复：给该元素加
pointer-events: auto，但注意这不能覆盖父级设的none—— 必须找到真正设了none的那个上级元素去改 - 若遮罩层是视觉装饰（如半透明背景），直接给它加
pointer-events: none，比硬调 z-index 更干净 -
pointer-events是可继承属性，子元素不会自动“恢复”，需要显式写pointer-events: auto才能响应点击
z-index 不生效？检查是否掉进了层叠上下文陷阱
z-index 只对已定位元素（position: relative/absolute/fixed/sticky）有效，且只在**同一层叠上下文内**起作用。一个 transform: translateY(0) 或 opacity: 0.99 就会让父容器悄悄创建新上下文，把子元素的 z-index 锁死在局部范围里。
- 打开开发者工具 → “Computed” 面板，看目标元素的
z-index是否显示为具体数值（而非auto） - 逐级往上检查它的父级、祖父级，重点看是否有
transform、opacity 、<code>filter、will-change或contain - 修复思路不是把 z-index 改成 999999，而是：要么删掉触发层叠上下文的属性，要么把目标元素提到那个新上下文之外（例如挂到
下）
确认有没有隐形遮罩在“吃”点击
视觉上空无一物，DOM 里却稳稳盖着一层——这是最典型的点击失效场景。常见于：div 空容器、::before/::after 伪元素、设置了 opacity: 0 或 visibility: hidden 但仍占位的元素。
- 右键点击目标区域 → “检查”，看高亮框是否跳到别的标签上（比如一个看似无关的
section） - 临时给可疑元素加
outline: 2px solid red，确认它是否真实存在且覆盖目标位置 - 特别注意：伪元素默认继承父级
pointer-events，所以要穿透，得单独写.overlay::before { pointer-events: none; } -
opacity: 0和visibility: hidden仍会拦截点击；只有display: none或pointer-events: none才能真正释放事件流
确保元素本身有可点的“热区”
绝对定位元素若宽高为 0、left/top 值异常、或被父容器 overflow: hidden 裁剪，也会导致视觉可见但实际无法点击。
- 检查是否设置了明确的
width和height（或至少min-width/min-height） - 避免仅靠
transform偏移来定位，因为视觉位置和事件命中区域可能错位 - 父容器若设了
overflow: hidden，且子元素超出边界，点击区域会被裁掉——即使内容还看得见 - 动态插入的元素，要确保事件绑定发生在 DOM 插入完成之后，否则监听器绑在了不存在的节点上
真正卡住人的，往往不是 z-index 数字不够大，而是没搞清“谁跟谁比”。浏览器开发者工具的 “Layers” 面板（Chrome）或 “3D View”（Firefox）能一眼看出层叠顺序，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
