当 Sticky 容器设置 z-index: -1 时，其内部子元素即使设置了高 z-index 也无法响应鼠标事件——根本原因是负 z-index 会将整个 stacking context 置于 body 背后，导致 pointer-events 失效。解决关键在于将可交互元素移出该 stacking context，而非仅靠提升内部 z-index。
当 sticky 容器设置 z-index: -1 时，其内部子元素即使设置了高 z-index 也无法响应鼠标事件——根本原因是负 z-index 会将整个 stacking context 置于 body 背后，导致 pointer-events 失效。解决关键在于将可交互元素移出该 stacking context，而非仅靠提升内部 z-index。
要让按钮在具有 z-index: -1 的 sticky 区域中保持可点击，核心原则是：避免让可交互元素成为负 z-index 容器的后代。CSS 中，z-index 仅对定位元素（position 为 relative/absolute/fixed/sticky）生效，且负值会创建一个位于根 stacking context（通常是 ）之下的新层叠上下文——此时，无论其子元素 z-index 设得多高，都仍被“困”在这个靠后的上下文中，无法接收指针事件。
✅ 正确做法是：将按钮容器（如 .gallery-btn-container）从 sticky section 内部移出，改为与 section 同级的兄弟元素，并赋予其独立的、正值的 z-index 和 position: sticky（或 position: fixed），从而确保它处于更上层的 stacking context 中。
以下是优化后的 HTML 结构与 CSS：
<!-- 注意：.gallery-btn-container 现在与 section 同级 -->
<section class="scroll-images-section">
<div class="grid-columns">
<!-- 更多内容 -->
</div>
</section>
<div class="gallery-btn-container">
<button class="gallery-btn">Galerie</button>
</div>.scroll-images-section {
z-index: -1;
width: 100%;
max-width: 100vw;
height: 100vh;
position: sticky;
top: 0;
overflow: hidden;
/* 移除 bottom/right/left —— sticky 只需 top 即可 */
}
/* 按钮容器脱离 section，独立定位 */
.gallery-btn-container {
position: sticky;
top: auto; /* 避免跟随滚动 */
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
z-index: 100; /* 显著高于 -1，确保在最上层 */
pointer-events: auto; /* 显式启用（虽为默认值，但增强可读性） */
}
.gallery-btn {
width: 160px;
height: 45px;
color: #1b1d1c;
background-color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: "Darker Grotesque", sans-serif;
font-size: 1.4rem;
/* 不再需要 !important 的 z-index —— 它已不在负 z-index 上下文中 */
}⚠️ 关键注意事项：
- ❌ 错误思路：在
.scroll-images-section内部用z-index: 9999强行提升按钮层级——无效，因父容器已建立负 stacking context； - ✅ 正确策略：结构解耦 + 独立定位，让可交互元素拥有自己的 stacking context；
- 若需按钮随视口固定（不随页面滚动），可将
.gallery-btn-container改为position: fixed，并配合bottom: 50px; left: 50%; transform: translateX(-50%);实现居中； - 始终检查浏览器 DevTools 的 Layers 面板，确认按钮是否渲染在预期的图层之上；
-
pointer-events: auto虽为默认值，但在复杂覆盖场景中显式声明可提高可维护性。
通过这种结构重构，你既能保留 sticky + 负 z-index 带来的视觉“背景穿透”效果（如图片层叠滑动揭示），又能确保操作控件始终可交互——真正实现视觉表现与功能可用性的兼顾。
