EnlightenCode

解决绝对定位元素挡住下方元素点击事件的问题 🎯 ​

问题背景 ❓ ​

在开发过程中，我们经常会遇到这样的情况：当页面中有绝对定位元素与其他元素发生重叠时，上层的绝对定位元素会阻挡下方元素的点击事件。这是因为绝对定位元素会创建一个新的层叠上下文，默认会覆盖普通文档流中的元素。

问题演示 🔍 ​

初始代码示例 ​

html
<style>
  .fa {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
  }
  .son {
    width: 100%;
    height: 100px;
    background-color: aqua;
  }
  .po {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 200px;
    background-color: green;
  }
</style>

<div class="fa" onclick="fa()">
  <div class="son" onclick="son(event)">
    <span>点击测试区域</span>
  </div>
  <div class="po"></div>
</div>

<script>
  function fa() {
    console.log('触发了父元素事件')
  }

  function son(event) {
    event.stopPropagation()
    console.log('触发了子元素事件')
  }
</script>

解决方案 💡 ​

1. 调整层叠顺序（推荐）✨ ​

通过设置 z-index 来调整元素的层叠顺序。需要注意的是，z-index 属性只对定位元素（position 值不为 static 的元素）生效。

css
.son {
  position: relative;  /* 必须设置定位 */
  z-index: 1;         /* 提升层级 */
}

2. 使用 pointer-events（替代方案）🎯 ​

通过设置 pointer-events: none 让鼠标事件穿透绝对定位元素。

css
.po {
  pointer-events: none;  /* 鼠标事件将穿透此元素 */
}

注意事项 ⚠️ ​

  1. 使用 z-index 方案时：

    • 确保目标元素设置了定位属性（relative/absolute/fixed）
    • 注意控制 z-index 数值，避免过大造成与其他元素的层级冲突

  2. 使用 pointer-events: none 方案时：

    • 该元素将完全无法接收鼠标事件
    • 其子元素也会继承这个属性
    • 如果需要子元素能接收事件，可以为子元素设置 pointer-events: auto

浏览器兼容性 🌐 ​

  • z-index: 所有现代浏览器都支持
  • pointer-events: IE11+，其他现代浏览器都支持

最佳实践建议 💪 ​

  1. 优先考虑使用 z-index 方案，因为它不会影响元素的事件处理能力
  2. 当遇到复杂的层叠关系时，建议:
    • 制定清晰的层级管理方案
    • 使用 CSS 变量管理 z-index 值
    • 避免过度使用绝对定位

扩展阅读 📚 ​