父元素设 pointer-events: none 时，子元素 pointer-events: auto 完全无效，因为浏览器在事件捕获阶段直接跳过整棵子树，子元素的 pointer-events 值根本不被读取；验证可用 getComputedStyle 获取值为 "none"；正确做法是将按钮提为遮罩兄弟节点、用伪元素模拟遮罩或使用 Portal 渲染。
父元素设 pointer-events: none 时，子元素 pointer-events: auto 完全无效
这不是样式没生效，而是浏览器在事件捕获阶段就跳过整棵子树——事件根本不会进入该节点及其所有后代。你给 .overlay 设了 pointer-events: none，再给里面的 .close-btn 写 pointer-events: auto，后者压根不会被读取。
验证方式很简单：打开 DevTools，选中按钮，在 “Computed” 面板搜 pointer-events。如果显示 none（哪怕带删除线），说明它被某个祖先强制覆盖；运行 getComputedStyle(document.querySelector('.close-btn')).pointerEvents 返回 "none" 就能确认。
真正起作用的是渲染树的自顶向下遍历顺序
浏览器不是“看到按钮就触发”，而是从最顶层容器开始逐层 hit-test，只要遇到第一个 pointer-events: none 的节点，整棵子树直接跳过，后续所有子元素的 pointer-events 值都不再参与判断。
-
pointer-events: none是硬跳过，不是“禁用点击”，而是让元素彻底不进事件流 - 它不继承，但会阻断子树；
auto在这种上下文中形同虚设 - Firefox、Chrome、Safari 行为完全一致，不存在兼容性差异
遮罩里放关闭按钮的正确做法
别试图在父子结构里“修复”，得换 DOM 结构或渲染策略：
立即学习“前端免费学习笔记（深入）”；
- 把按钮提为遮罩的兄弟节点：
<div class="overlay"></div><button class="close-btn">×</button>，再用position: absolute+z-index叠上去 - 用伪元素模拟遮罩：
.overlay::before设pointer-events: none，真实按钮保留在主 DOM 流中 - React/Vue 中优先用 Portal 渲染到
<body>下，彻底脱离祖先干扰
移动端和表单控件有额外限制
即使 DOM 结构和 CSS 都对了，这些场景仍可能失效：
-
<input>、<select>、<textarea>这类原生表单控件，无法被子元素的pointer-events: auto恢复 focus —— iOS Safari 和部分安卓 WebView 甚至不弹软键盘 -
input[type="file"]在华为、小米等厂商 WebView 中常忽略pointer-events: none，必须 JS 临时移除 DOM 节点 - 动画中若只在首尾切
pointer-events，中间帧仍是auto，用户可能点中半透明状态下的遮罩
最容易被忽略的，是那个真正盖住目标的元素，往往不是你直觉里写的那个 class，而是某个 ::before、<svg> 子节点，或者 position: fixed 的导航栏——它们都得单独检查并设 pointer-events: none。
