绝对定位元素用 visibility: hidden 或 opacity: 0 隐藏时仍会点透，需在其自身设置 pointer-events: none；子元素若需交互则单独设 pointer-events: auto，且须注意 IE 兼容性与层叠上下文干扰。
绝对定位元素隐藏后还能点透？先看 pointer-events 是否生效
不是所有“隐藏”都等于“不可交互”。display: none 会彻底移除元素的交互能力，但 visibility: hidden 或 opacity: 0 下，元素仍占据布局、响应鼠标事件——这时候点击就会穿透到下层。用 pointer-events: none 是最直接的解法，但它只对“当前元素”起作用，子元素默认继承，需手动重置。
-
pointer-events: none必须加在**被隐藏但仍在 DOM 中的绝对定位元素本身**上，而不是父容器 - 如果该元素内有按钮、链接等可点击子元素，且你希望它们仍可用，得单独给子元素设
pointer-events: auto - IE11 及更早版本不支持
pointer-events（但 IE 对position: absolute+visibility: hidden的穿透行为本身就不一致，实际中常需降级处理）
为什么 display: none 不总是适用？
很多同学第一反应是“那我直接 display: none 呗”，但现实场景常不允许：比如动画过渡需要元素保留在文档流中占位、或依赖其尺寸做 JS 测量、或服务端渲染时不能删 DOM 节点。这时 visibility: hidden 或 opacity: 0 就成了折中选择——但随之而来就是点击穿透问题。
-
display: none会触发重排（reflow），而visibility: hidden和opacity: 0只触发重绘（repaint），性能更轻量 - 若用 CSS 动画控制显隐，
opacity支持硬件加速，visibility不支持动画过渡（浏览器会跳变），所以opacity: 0更常用 - 但
opacity: 0元素依然响应click、hover，必须配pointer-events: none才真正“不可点”
React/Vue 中动态控制 pointer-events 的常见写法
框架里别硬写内联 style，容易漏掉条件分支。推荐用 class 控制，语义清晰、易复用、也方便调试。
- 写一个
.is-hidden类：.is-hidden { visibility: hidden; pointer-events: none; } - 在 React 中：
className={\`panel \${isHidden ? 'is-hidden' : ''}\`} - 在 Vue 中：
:class="{ 'is-hidden': isHidden }" - 避免这样写：
style={{ opacity: isHidden ? 0 : 1, pointerEvents: isHidden ? 'none' : 'auto' }}—— 容易和 CSS 动画冲突，且维护成本高
穿透没解决？检查这三件事
加了 pointer-events: none 还点透，大概率不是属性没生效，而是别的地方干扰了。
- 确认目标元素确实被选中：用浏览器 DevTools 检查 computed 样式，看
pointer-events是否为none，且没被更高优先级规则覆盖 - 检查父级是否设置了
pointer-events: none并向下继承——即使子元素设了auto，父级的none也会拦截事件（事件捕获阶段就终止了） - 确认没有其他绝对定位元素叠在上方、且未隐藏——有时候你以为隐藏了 A，其实 B 还盖在上面，B 才是真正在接收点击的那个
真实项目里最容易忽略的是继承链和层叠上下文。哪怕只改一行 pointer-events，也要顺手点开 Elements 面板，一层层看 computed 值，而不是凭感觉猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
