如何让被上层div遮挡的下层div内链接可点击且不改变div宽度

核心原因：第二个宽度100%的绝对定位div覆盖在第一个div上方，其透明区域拦截了下层Link-1的点击事件。仅需调整点击响应属性即可实现需求，无需修改原有div宽度配置。

修改后的CSS代码 #

div {
  width: 100%;
  border: 1px solid black;
}

div:nth-child(1) {
  position:absolute;
  top:0px;
}

div:nth-child(2) {
  text-align: right;
  position:absolute;
  top:0px;
  right: 30px;
  /* 新增属性，让当前div不拦截鼠标事件 */
  pointer-events: none;
}

/* 新增样式，恢复上层div内链接的点击能力 */
div:nth-child(2) a {
  pointer-events: auto;
}

原理说明 #

• 给上层div设置pointer-events: none后，该元素不会响应任何鼠标交互操作，点击其覆盖区域会直接穿透到下层元素，此时下层的Link-1即可正常触发点击
• 单独给上层div内的a标签设置pointer-events: auto，恢复链接本身的交互能力，保证Link-2的点击功能不受影响
• 该属性兼容所有现代浏览器，包括IE11及以上版本，常规业务场景使用无问题

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