加 pointer-events: none 是解决绝对定位遮挡点击的核心方法，需作用于遮挡元素本身并为子交互元素显式设 auto；该属性仅影响指针事件，不支持 ie11 以下，且需配合可访问性属性使用。
绝对定位元素遮挡了下层可点击区域？不是 z-index 没用，大概率是 pointer-events 没配对——它才是控制“点不点得到”的开关，z-index 只管“谁在上面”。
为什么加了 pointer-events: none 还是点不到下层？
常见错误是把 pointer-events: none 加错了地方。它必须作用于**当前遮挡的元素本身**，而不是它的父容器或兄弟节点。比如一个 .overlay 盖住了按钮，就得给 .overlay 设 pointer-events: none，而不是给按钮或 body。
另外要注意继承行为：子元素默认继承父级的 pointer-events 值。如果 overlay 里有需要保留点击的按钮，得单独重置：
.overlay { pointer-events: none; }.overlay > button { pointer-events: auto; }
漏掉第二步，按钮就真点不了了。
visibility: hidden 或 opacity: 0 时必须配 pointer-events: none
这两个属性只是让元素“看不见”，但浏览器仍把它当有效目标——点击、hover 全都照常触发，事件根本不会往下传。
所以只要用了 visibility: hidden 或 opacity: 0 来隐藏（比如做动画过渡、保 DOM 结构），就必须同步加 pointer-events: none 才算真正“不可交互”。
对比 display: none：它天然禁用交互，但会触发重排，且无法做 CSS 动画，也不适合服务端渲染中不能删节点的场景。
React/Vue 中动态控制 pointer-events 的安全写法
别在组件里硬写内联 style 控制 pointer-events，容易漏分支、难调试、和 CSS 动画冲突。推荐用 class 切换：
- 定义一个
.is-invisible类：.is-invisible { visibility: hidden; pointer-events: none; } - React：
className={`panel ${isHidden ? 'is-invisible' : ''}`} - Vue：
:class="{ 'is-invisible': isHidden }"
这样语义清晰，也方便后续加 transition 或 media query。
IE11 和移动端 Safari 的兼容性坑
pointer-events: none 在 IE11 中只对 SVG 元素原生支持，对普通 HTML 元素需降级处理（比如用 display: none + JS 模拟动画）。
Safari on iOS 对滚动容器内设置了 pointer-events: none 的元素，偶尔有事件延迟或丢失，尤其在快速滚动后立即点击。遇到这类问题，可尝试给父容器加 will-change: transform 或改用 transform: translateZ(0) 触发硬件加速。
最后提醒一句：这个属性只影响指针事件，不影响键盘焦点和屏幕阅读器。如果元素本该可聚焦（比如按钮），仅靠 pointer-events: none 会破坏可访问性——该禁用时，记得同步设 tabindex="-1" 或 aria-disabled="true"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
