应直接给遮挡元素本身加 pointer-events: none，而非父容器或兄弟节点；该属性仅对当前元素生效，不继承也不跳过子元素，且 opacity: 0 或 visibility: hidden 仍需配合 pointer-events: none 才能透传点击。
绝对定位元素挡住按钮点击，直接加 pointer-events: none
遮挡层点不了，不是底层按钮坏了，而是上层那个 div 在吃点击事件。只要它有尺寸、在 z-index 上层、且没设 display: none，默认就会拦截所有鼠标操作。
最干净的解法就是给遮挡层本身加：pointer-events: none。它不改布局、不触发重排、不影响动画或视觉呈现，只让 click/mouseover/touchstart 这些事件透传到底层可交互元素。
- 必须确认遮挡层纯属装饰（比如半透明蒙版、背景光效），不需要任何鼠标交互
- 该属性可继承：如果遮挡层里有关闭按钮，得单独给它加
pointer-events: auto - 伪元素（
::before/::after）默认也参与事件流，哪怕只是画个阴影，也得显式设pointer-events: none - 别用
opacity: 0或visibility: hidden代替——它们依然拦截点击
为什么调 z-index 没用？先查层叠上下文
z-index 不是全局排序器，它只在同一个层叠上下文内有效。一个 transform: translateY(0)、opacity: 0.99 或 filter: blur(1px) 就会让整棵子树脱离父级上下文，导致你设的 z-index 根本没地方比。
打开开发者工具 → “Computed” 面板，搜 stacking context，找到第一个标有 “This element establishes a stacking context” 的祖先——它大概率就是让 z-index 失效的源头。
- 临时排查：给可疑父级加
outline: 2px solid red，看是否真覆盖目标热区 - 想让弹层浮在最上，别硬写
z-index: 9999；推荐把节点appendChild到document.body，再配position: fixed - 如果必须保留在原 DOM 位置，检查从弹层到
body路径上的每个父级，移除不必要的transform、opacity、filter
遮罩里要放可点击按钮，怎么避免继承失效？
pointer-events 是可继承属性。设在父层上，子元素默认也会变成 none——这不是 bug，是预期行为。常见误判是：遮罩设了 pointer-events: none，结果里面 close-btn 也点不了，其实就差一行重置。
- 正确写法：
.overlay { pointer-events: none; } .overlay .close-btn { pointer-events: auto; } - 慎用于表单控件：
input、textarea设为none后无法聚焦，键盘操作也失效 - 部分安卓 WebView 对嵌套
none+auto支持不稳定；真机测试时若穿透失败，改用position: absolute+ 独立z-index分离图层更稳 - 多个
pointer-events: none元素堆叠时，事件穿透顺序取决于渲染树绘制顺序，不是 DOM 顺序——这点容易被忽略
点击空白处关闭弹窗，为什么不能只靠 pointer-events: none？
因为 pointer-events: none 是无条件穿透，它没法判断“用户是不是真点在遮罩空白区域”。一旦设了 none，连遮罩上的关闭按钮都收不到事件，逻辑就断了。
这种条件性穿透必须配合 JS：overlay.style.pointerEvents = 'auto'，然后监听 click，再通过 event.target === overlayEl 判断是否点在遮罩本体上（而非子元素）。
- 图表图例高亮联动：hover 时临时给非目标图层加
pointer-events: none，离开时还原 - 拖拽中禁用底层滚动：拖拽开始设
body { pointer-events: none }，结束立刻恢复，否则 iOS 上可能卡住 touch 事件 - 移动端真机必测：iOS Safari 旧版本遇到
none层下的input，可能连软键盘都不弹
pointer-events: none，事件穿透顺序不是按 DOM 顺序，而是严格按渲染树绘制顺序。调试时别只盯着 HTML 结构看。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
