CSS解决重叠Div遮挡下方Div内链接无法点击的问题

给遮挡的.border-overlap元素添加pointer-events: none CSS属性，就能让鼠标事件直接穿透到下方的灰色盒子及其链接上，同时完全保留原有的视觉层级（边框依然在盒子上方，文字不会覆盖边框）。

完整代码示例 #

HTML

<div class="container">
  <div class="border-overlap"></div>
  <div class="box">
    There's text here and <a href="#">some links</a> which should be clickable.
  </div>
</div>

CSS

.container {
  position: relative;
  width: 300px;
}

.border-overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #000;
  pointer-events: none; /* 核心属性，取消鼠标事件拦截 */
}

.box {
  background-color: #ccc;
  padding: 20px;
  position: relative;
  z-index: -1; /* 确保盒子在边框下方 */
}

原理说明 #

• pointer-events: none 会让元素放弃所有鼠标交互权限，点击、悬停等事件会直接传递给它下方的层级元素，完美解决边框遮挡链接的问题。
• 不需要调整链接的z-index，也不需要改变HTML结构，完全符合你的限制条件。

如果后续需要让.border-overlap的某部分子元素恢复交互能力，只需给对应子元素设置pointer-events: auto即可。

内容的提问来源于stack exchange，提问作者CyberJ