如何让z-index=-1的元素接收点击？div滚动、子元素交互与内阴影共存方案

一、让z-index=-1的元素接收点击事件 #

默认情况下，z-index: -1的元素会被父元素（或其他层级更高的元素）遮挡，导致点击事件被上层元素拦截。要解决这个问题，核心是让上层元素不拦截指向该元素的点击：

• 给父元素添加 pointer-events: none，这样父元素会忽略所有指针事件，点击会穿透到下层元素；
• 给目标元素（z-index=-1的那个）添加 pointer-events: auto，明确让它接收指针事件。

⚠️ 注意：如果父元素本身需要接收指针事件（比如你的滚动容器），这个方法就不适用了。这种情况下，你需要调整元素结构，比如把z-index=-1的元素放在父元素的同级层级，再通过定位来放置，避免被父元素遮挡。

二、滚动容器实现「内阴影覆盖子元素+子元素/容器可交互」 #

你的核心矛盾是：box-shadow: inset 是绘制在容器内容层下方的，子元素会盖在阴影上面；但如果用普通元素做阴影，又会拦截点击事件。这里用伪元素+pointer-events: none就能完美解决：

具体实现代码示例

假设你的HTML结构是这样：

<div class="scroll-container">
  <img src="image1.jpg" alt="pic" />
  <img src="image2.jpg" alt="pic" />
  <img src="image3.jpg" alt="pic" />
</div>

对应的CSS：

.scroll-container {
  position: relative; /* 让伪元素可以基于它定位 */
  overflow-x: auto; /* 开启水平滚动 */
  width: 800px; /* 示例宽度 */
  padding: 20px; /* 可选，给阴影留出空间 */
  /* 这里不要加inset阴影，改用伪元素实现 */
}

/* 用伪元素生成覆盖在子元素上方的内阴影 */
.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6); /* 自定义内阴影样式 */
  z-index: 1; /* 确保阴影在子元素上方（子元素默认z-index为0） */
  pointer-events: none; /* 关键！让阴影不拦截任何指针事件，点击会穿透到下面的图片和容器 */
}

.scroll-container img {
  display: inline-block;
  height: 300px; /* 示例高度 */
  margin-right: 15px;
  /* 不需要额外设置z-index，默认0就会在伪元素阴影下方 */
  /* 如果之前设置了z-index，确保不要超过伪元素的1 */
}

为什么这个方案可行？

• 伪元素的阴影通过z-index:1覆盖在图片上方，满足「阴影盖在子元素上」的需求；
• pointer-events: none让伪元素完全不响应指针事件，所以点击图片时事件会穿透伪元素直接到达图片，容器的滚动事件也不会被干扰；
• 容器本身保持默认的pointer-events: auto，正常接收滚动等交互事件。

总结 #

把两个需求结合起来的话，只要确保：

1. 滚动容器用伪元素实现覆盖式内阴影，并给伪元素加pointer-events: none；
2. 若存在z-index=-1的元素，尽量调整它的层级结构，避免和滚动容器的交互需求冲突，必要时用pointer-events精准控制元素的事件响应。

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