pointer-events: none 是首选解法，它不改变布局、不触发重排，仅精准切断事件捕获，使点击穿透至底层链接；而 z-index 易因层叠上下文失效，排查更复杂。
直接给遮挡层加 pointer-events: none，事件就能穿透到底层链接——这是最轻量、最确定的解法，比调 z-index 真实有效。
为什么 pointer-events: none 是首选
它不改变布局、不触发重排、不影响动画或焦点逻辑，只精准切断鼠标/触控事件捕获。遮挡层视觉照常显示，但点击会直接落到下面的 a 标签上。而 z-index 常因层叠上下文失效（比如父级有 opacity: 0.99 或 transform），查起来费时还容易误判。
- 必须确认遮挡层是纯装饰用途（如半透明蒙版、背景光效），不需要任何交互
- 该属性可继承：如果遮挡层里有关闭按钮等子元素，得单独给它加
pointer-events: auto - 普通 HTML 元素只认
auto和none；visible、fill等值会被忽略，别白写
伪元素遮挡时怎么处理
::before 或 ::after 默认参与事件流，哪怕只是画个阴影或渐变，也会挡住下面的链接。不能只靠 z-index: -1，因为某些场景下（比如父容器已建立层叠上下文）它根本不起作用。
- 优先给伪元素本身设
pointer-events: none，例如：.overlay::before { pointer-events: none; } - 若伪元素需要 hover 效果但又不想拦截点击，就得拆开：用一个仅用于视觉的伪元素 + 一个透明但可点的空元素覆盖在上层
- 别依赖
opacity: 0或visibility: hidden——它们依然吃点击；只有display: none或pointer-events: none才真正释放事件流
排查遮挡源的实操步骤
不是所有“点不了”都该加 pointer-events，先得确认谁真在挡路。开发者工具里右键目标链接区域，“检查”跳到的 DOM 节点往往就是罪魁祸首。
- 临时给可疑父级或相邻元素加
outline: 2px solid red，看是否真覆盖链接热区 - 打开 “Computed” 面板，搜
pointer-events，看值是不是none（哪怕带删除线，也说明被祖先设过） - 搜
stacking context，找到第一个标有 “This element establishes a stacking context” 的祖先——它大概率就是让z-index失效的源头 - 特别注意空
div、section或设置了width/height但没内容的容器，它们常被忽略却稳稳盖着链接
真正容易被忽略的是：多个 pointer-events: none 层叠时，事件穿透顺序不是按 DOM 顺序，而是严格按渲染树的绘制顺序。真机测试时，尤其 iOS Safari 上，点被设为 none 的区域，务必确认下层链接真能响应 click，而不是只在桌面浏览器里看起来正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
