注意，这里有几个关键点：

• 属性是加给遮挡层的，而不是被遮挡的目标元素。
• 这个属性是可以继承的：如果遮挡层里有关闭按钮等需要交互的子元素，必须单独给那个子元素加 pointer-events: auto 来恢复点击能力。
• 对普通HTML元素来说，只识别 auto 和 none 这两个值。visible、fill 这些SVG中使用的值会被直接忽略。

伪元素 ::before/::after 也在拦截点击

很多时候，真正的罪魁祸首是那些看起来不起眼的伪元素。哪怕只是用 ::before 画个阴影、渐变或边框，它们默认也参与事件流，会稳稳地覆盖在下方链接的上面。不要指望用 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 失效的源头。
• 特别留意那些空的

  、

  ，或者设置了宽高但没有内容的容器。它们经常被忽略，却稳稳地覆盖在链接上面。

另外，多个 pointer-events: none 层叠时，事件穿透的顺序严格遵循渲染树的绘制顺序，而不是DOM顺序。在真机测试时，尤其是iOS Safari上，点击了被设为 none 的区域，务必确认下层的链接真的能响应 click 事件，不要在桌面浏览器里看着正常就以为万事大吉了。