当使用 position: sticky 配合 z-index: -1 实现视差/遮罩揭示效果时，内部元素（如按钮）会因层级过低而无法响应点击事件；本文提供一种无需放弃视觉效果、仅通过 DOM 结构优化与层级策略即可恢复交互性的可靠方案。
当使用 position: sticky 配合 z-index: -1 实现视差/遮罩揭示效果时，内部元素（如按钮）会因层级过低而无法响应点击事件；本文提供一种无需放弃视觉效果、仅通过 dom 结构优化与层级策略即可恢复交互性的可靠方案。
在 CSS 中， 单纯在 ✅ 正确解法：将可交互元素移出负 z-index 容器的 DOM 子树，使其成为同级元素，从而脱离该 stacking context 的限制。 以下是推荐的结构与样式重构： ⚠️ 注意事项： 总结：实现「视觉上后置 + 功能上可用」的关键，在于分离渲染层级与交互层级——让视觉遮罩（负 z-index sticky section）和用户操作入口（同级定位按钮容器）分属不同 stacking context。这既保留了设计所需的沉浸式揭示动效，又保障了核心交互的可靠性。z-index 仅对定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效，但一个关键限制是：负 z-index 的元素会置于其最近的 stacking context 背景之下（甚至可能低于 的背景层），导致其子元素即使设置了高 z-index，也无法突破该 stacking context 的层级边界——这就是按钮“失灵”的根本原因。.gallery-btn-container 或 .gallery-btn 上增加 z-index 和 pointer-events: auto 是无效的，因为它们仍被包裹在 z-index: -1 的 .scroll-images-section 内部，整个 section 构成了一个降级的 stacking context，其内部所有内容默认渲染在 body 背景之下，鼠标事件自然被上层元素（如 body 或后续兄弟元素）捕获。<!-- ✅ 正确结构：按钮容器脱离 sticky 负 z-index 区域 -->
<section class="scroll-images-section"><div class="grid-columns">
<!-- 更多内容 -->
</div>
</section><!-- 按钮容器作为同级元素，独立于 sticky section --><div class="gallery-btn-container">
<button class="gallery-btn">Galerie</button>
</div>
.scroll-images-section {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
z-index: -1; /* 保持视觉揭示效果 */
overflow: hidden;
}
/* 按钮容器：同级定位，脱离负 z-index 影响 */
.gallery-btn-container {
position: sticky;
top: 0;
width: 100%;
text-align: center;
z-index: 10; /* 明确高于 sticky section */
pointer-events: auto; /* 确保事件可穿透（虽默认即为 auto，显式声明更稳妥） */
margin-top: -100vh; /* 视觉上“叠加”在 section 底部（需配合 padding/margin 调整） */
transform: translateY(calc(100vh - 50px)); /* 更精准控制垂直位置，替代 bottom */
}
.gallery-btn {
width: 160px;
height: 45px;
background-color: #fff;
color: #1b1d1c;
border: none;
border-radius: 5px;
font-family: 'Darker Grotesque', sans-serif;
font-size: 1.4rem;
cursor: pointer;
z-index: 11; /* 可选，确保按钮自身层级清晰 */
}
!important 强行覆盖 z-index，它无法突破 stacking context 边界；clamp() 或媒体查询调整 transform 偏移量，而非固定 bottom: 50px；touch-action 行为）。
