当 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。
要让按钮在具有 ✅ 正确做法是：将按钮容器（如 以下是优化后的 HTML 结构与 CSS： ⚠️ 关键注意事项： 通过这种结构重构，你既能保留 sticky + 负 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 中。<!-- 注意：.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；.gallery-btn-container 改为 position: fixed，并配合 bottom: 50px; left: 50%; transform: translateX(-50%); 实现居中；pointer-events: auto 虽为默认值，但在复杂覆盖场景中显式声明可提高可维护性。
