如何让absolute元素不拦截点击，触发下层交互？

首选方案：CSS 指针事件穿透 #

这是零JS代码侵入、性能最好的实现方式，完全不需要调整原有元素的层级，也不需要依赖label标签：

• 直接给需要“只做视觉展示、不拦截点击”的absolute定位元素添加pointer-events: none样式
• 效果说明：该配置完全不影响元素的视觉展示——图标、装饰块的样式、透明度、层级显示都和原效果一致；但会让当前元素完全不捕获鼠标点击、悬停、拖拽等所有指针类交互事件，所有鼠标操作会直接穿透到元素后方的页面内容，自然触发下层元素的默认行为
• 场景适配：对应表单input内部放图标的需求，加上这个样式后，点击图标时操作会直接落到下层input上，自动触发input聚焦，和label绑定的交互效果完全一致
• 灵活适配：如果这个absolute上层元素里，有小部分子元素是需要保留自身点击交互的，只需要单独给这个子元素加回pointer-events: auto，就能实现“整块区域大部分穿透、局部可交互”的效果

示例代码：

.input-container {
  position: relative;
}
/* 绝对定位的内部图标 */
.input-prefix-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  /* 核心穿透配置：不影响视觉，只拦截交互 */
  pointer-events: none;
}

<div class="input-container">
  <input type="text" class="text-input" placeholder="请输入内容">
  <div class="input-prefix-icon">🔍</div>
</div>

特殊兼容方案：JS手动触发下层交互 #

如果遇到极旧浏览器不支持pointer-events属性，或者上层元素需要保留悬停变色等非点击交互，可以通过JS手动绑定实现：

• 让上层absolute元素正常接收点击事件，在事件回调里主动触发下层目标元素的对应行为
• 比如对应图标的场景：监听图标的点击事件，拦截默认行为后，手动调用下层input的focus()方法实现聚焦效果

示例代码：

const prefixIcon = document.querySelector('.input-prefix-icon');
const targetInput = document.querySelector('.text-input');

prefixIcon.addEventListener('click', (event) => {
  // 阻止图标自身的默认事件冒泡
  event.stopPropagation();
  // 手动触发下层input的聚焦
  targetInput.focus();
})

注意：这个方案需要手动维护上层元素和下层目标元素的对应关系，如果上层元素覆盖了多个不同的可交互区域，维护成本会比较高，优先使用第一种CSS方案。

常见踩坑点 #

• 不要把pointer-events: none加到外层包裹的父元素上，不然会导致父容器内本身需要交互的元素（比如text input）也收不到点击事件，一定要只加在需要穿透的纯视觉上层元素上
• 配置了pointer-events的元素不管z-index层级多高，都不会拦截下层交互，不需要特意调整层级顺序把上层视觉元素放到下层

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