给遮盖层加 pointer-events: none 可使鼠标事件穿透至下层元素，若其子元素需交互则单独设 pointer-events: auto；该属性仅影响鼠标/触控事件，不支持 ie11 及以下，且在普通 html 中仅 auto 和 none 有效。
绝对定位元素挡住了下面的按钮，点击没反应
这是 pointer-events 最典型的使用场景：父层用 position: absolute 盖在可交互元素（比如 button 或 a）上面，但又不希望它拦截鼠标事件。
默认情况下，所有元素都继承 pointer-events: auto，意味着它会响应鼠标，哪怕只是个空 div。只要它在 z-index 上层、有尺寸、且没设透明或不可见，就会吃掉点击。
- 最直接的解法是给遮盖层加
pointer-events: none - 如果遮盖层内部有需要点击的子元素（比如关闭按钮），再单独给那个子元素设回
pointer-events: auto - 注意：这个属性不影响
focus或键盘操作，只管鼠标/触控事件
pointer-events: none 会影响子元素，但可以被覆盖
pointer-events 是可继承的 CSS 属性，设在父元素上，子元素默认也会变成 none —— 这常被误以为“失效”，其实是预期行为。
比如一个弹窗背景层用了 pointer-events: none，结果里面 close-btn 也点不了，就是忘了重置它。
- 子元素必须显式声明
pointer-events: auto才能恢复响应 - 不能靠
z-index或opacity绕过，只有pointer-events能真正“透传”事件 - IE11 及以下不支持
pointer-events，如需兼容，得用 JS 模拟事件转发（但多数现代项目已无需考虑）
哪些值能用？别乱试 pointer-events: visible
很多人搜到过 visible、fill、stroke 等 SVG 相关值，但在普通 HTML 元素上，只有两个实际有效的值：
-
auto：默认行为，参与事件捕获和冒泡 -
none：完全不响应鼠标事件，事件穿透到下层
其他值（如 visible）在非 SVG 元素上会被浏览器忽略，等同于未设置 —— 不报错，也不生效。
和 opacity: 0 或 visibility: hidden 的区别
有人想用视觉隐藏代替事件屏蔽，但效果完全不同：
-
opacity: 0：元素还在文档流里，仍会拦截点击 -
visibility: hidden：元素不可见，但仍占空间，且依然响应事件 -
display: none：彻底移出渲染树，不占空间也不响应事件，但会触发重排，且无法做过渡动画 -
pointer-events: none：保持样式、布局、动画不变，仅关闭事件响应 —— 它是最轻量、最精准的解法
真正要小心的是嵌套层级深时，多个 pointer-events: none 层叠后，底层可点击区域是否还符合预期；这种时候建议用浏览器开发者工具的「Rendering」面板勾选 “Paint flashing” 或直接用 “Toggle element screenshot” 查看事件接收链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
