能，pointer-events: none 使元素对鼠标/触控事件完全不捕获，事件按渲染顺序穿透至下层元素，但不影响 dom 结构、视觉或键盘焦点；父设 none 后子元素必须显式设 auto 才可响应。
pointer-events: none 是什么，它真能“穿透”吗？
能，但只对鼠标和触控事件生效，且穿透行为严格按渲染顺序（paint order）发生，不是 DOM 顺序。它让元素彻底不参与事件捕获链，event.target 会直接落到视觉重叠区域的下层元素上。
常见误用场景：
- 给父容器设
pointer-events: none，里面按钮却点不了 → 子元素默认继承该值，需显式加pointer-events: auto - 在 iOS Safari 旧版本（pointer-events: none 下的
<input>可能连软键盘都不弹 → 必须真机测试 - 用
transition动pointer-events属性 → 浏览器不支持过渡该属性，会卡在中间状态，意外阻断事件
为什么 z-index 调高了还是点不到？
z-index 生效的前提是元素有定位（position: relative/absolute/fixed/sticky），且没被父级层叠上下文“锁死”。一旦父容器触发了新层叠上下文（比如用了 transform、opacity: 0.99、will-change），子元素的 z-index 就只能在那个小世界里比大小。
排查步骤：
- 用浏览器开发者工具的 “Computed” 面板，看目标元素的
z-index是否标为 “not applicable” - 检查最近的非
static定位父级，再往上查是否有transform: translateZ(0)或filter: blur(1px)等隐式创建层叠上下文的属性 - 若必须保留这些属性，把需要置顶的元素提到
body下，脱离原层叠上下文
绝对定位遮罩层怎么既显示又不挡点击？
典型场景：表格上叠加半透明高亮层、图表上画实时标注框、拖拽时显示指示蒙版。这类元素只需视觉存在，无需交互。
正确写法：
.overlay {
position: absolute;
background: rgba(255, 200, 0, 0.3);
z-index: 1;
pointer-events: none; /* ✅ 关键 */
}
注意：
- 不要加前缀（如
-webkit-pointer-events），现代浏览器已全支持标准属性 - 如果遮罩层里要放可点击的控件（比如关闭按钮），得单独给它设
pointer-events: auto - 多个
pointer-events: none元素堆叠时，事件穿透顺序取决于绘制顺序，不是 DOM 顺序 —— 这点容易被忽略
哪些情况不能只靠 pointer-events: none？
当穿透逻辑需要条件判断时，CSS 无能为力，必须配合 JS。
例如：
- 点击遮罩空白处关闭弹窗 → 遮罩本身需
pointer-events: auto，再通过event.target === overlayEl判断是否点在遮罩上 - 图例 hover 时只高亮对应折线 → hover 时临时给其他图层加
pointer-events: none，离开时还原 - 拖拽中禁用底层滚动 → 拖拽开始设
document.body { pointer-events: none }，结束立刻恢复，否则 iOS 可能卡住 touch 事件
真正容易被忽略的是：当多个绝对定位元素堆叠且都设了 pointer-events: none，事件穿透顺序不是按 DOM 顺序，而是严格按渲染树中的绘制顺序（paint order）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
