如何让sticky定位且负z-index容器内的元素可点击？

核心问题在于：设置了z-index: -1的父元素会创建独立的堆叠上下文，容器内所有子元素的层级都会被限制在这个上下文内，无法突破到body之上，导致按钮被body覆盖，点击事件无法触发。以下是三种可行的解决方案：

方法1：将按钮移出sticky容器（最稳妥） #

把按钮从负z-index的容器中移出，单独设置定位和层级，彻底摆脱父元素堆叠上下文的限制：

修改后的HTML： #

<section class="scroll-images-section">
  <div class="grid-columns">
    <!-- more content here -->
  </div>
</section>
<!-- 按钮容器移到section外 -->
<div class="gallery-btn-container">
  <button class="gallery-btn">Galerie</button>
</div>

调整后的CSS： #

.scroll-images-section {
  z-index: -1;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.gallery-btn-container {
  position: fixed; /* 或根据布局需求使用absolute */
  bottom: 50px;
  width: 100%;
  text-align: center;
  z-index: 10; /* 确保层级高于body */
}

.gallery-btn {
  width: 160px;
  height: 45px;
  color: #1b1d1c;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Darker Grotesque;
  font-size: 1.4rem;
}

方法2：移除父元素的负z-index，通过后续内容实现reveal效果 #

如果不需要父元素的负z-index，可以通过给后续内容设置更高层级来实现reveal效果，同时保留按钮的正常交互：

修改父元素CSS： #

.scroll-images-section {
  /* 移除z-index: -1 */
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

给后续内容容器添加CSS： #

/* 假设后续内容的容器类名为next-section */
.next-section {
  position: relative;
  z-index: 1;
  background-color: #fff; /* 用背景覆盖sticky区域实现reveal效果 */
  /* 其他原有样式保持不变 */
}

方法3：通过pointer-events控制交互（保留父元素负z-index） #

如果必须保留父元素的z-index: -1，可以通过pointer-events属性让父元素不拦截点击事件，只允许子元素响应：

修改后的CSS： #

.scroll-images-section {
  z-index: -1;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none; /* 父元素忽略所有鼠标事件 */
}

.gallery-btn-container {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  z-index: 10;
  pointer-events: auto; /* 恢复容器的点击事件响应 */
}

.gallery-btn {
  z-index: 1200;
  width: 160px;
  height: 45px;
  color: #1b1d1c;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Darker Grotesque;
  font-size: 1.4rem;
  pointer-events: auto; /* 确保按钮可以正常接收点击 */
}

原理说明： #

父元素设置pointer-events: none后，会将所有鼠标事件穿透到下方元素，但子元素设置pointer-events: auto可以重新启用交互，这样按钮就能正常触发点击事件，同时父元素的reveal效果不受影响。

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