pointer-events: none必须加在遮挡元素自身上，因该属性不继承、不传播、仅对声明它的元素生效；加在父容器或兄弟节点会导致失效，且子元素无法通过auto恢复响应。
直接给遮挡层加 pointer-events: none，再为需要交互的子元素显式设 pointer-events: auto —— 这是最轻量、最可控的解法，比调 z-index 或删 DOM 更精准。
为什么 pointer-events: none 必须加在遮挡元素自身上？
它不继承、不传播、不跨层生效，只作用于声明它的那个元素。常见错误是加在父容器或兄弟节点上，结果下层按钮依然点不了。
- 错误写法：
.container { pointer-events: none; }→ 子元素全失活，包括本该可点的按钮 - 正确写法：
.overlay { pointer-events: none; }→ 仅屏蔽遮盖层本身 - 如果遮盖层里有关闭按钮，必须额外写：
.overlay .close-btn { pointer-events: auto; }
用 opacity: 0 或 visibility: hidden 时，为什么一定要配 pointer-events: none？
这两个属性只控制“是否可见”，不改变事件捕获能力。浏览器仍把它们当有效目标，点击、:hover 全照常触发。
-
opacity: 0：支持 CSS 动画和硬件加速，但默认仍拦截点击 → 必须配pointer-events: none -
visibility: hidden：不支持平滑过渡（会跳变），但仍占布局空间 → 同样需pointer-events: none -
display: none虽天然禁用交互，但会触发重排，且无法做动画，多数场景不合适
两个绝对定位元素都要响应点击/悬停，怎么同时生效？
不能简单全设 none，得靠伪类动态切换：鼠标悬停时临时让上层透传，移出时恢复交互。
- 上层元素设：
.top-layer:hover { pointer-events: none; } - 下层元素显式声明：
.bottom-layer { pointer-events: all; }（避免被意外继承覆盖） - 注意：滚动事件也受
pointer-events影响，若下层需滚动，pointer-events: all是必需的 - IE11 及更早版本不支持
pointer-events，如需兼容，得用 JS 模拟事件转发，但现代项目基本可忽略
真正容易被忽略的是层叠上下文干扰——比如某个父容器设置了 transform 或 will-change，会创建新的堆叠上下文，导致 z-index 和 pointer-events 行为偏离预期。调试时建议打开开发者工具的「Rendering」面板，勾选 “Event listener breakpoints” 或直接用 “Toggle element screenshot” 查看事件接收链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
