当使用 position: sticky 配合 z-index: -1 实现视差/遮罩揭示效果时，内部元素（如按钮）会因层级过低而无法响应点击事件；本文提供一种无需放弃视觉效果、仅通过 DOM 结构优化与层级策略即可恢复交互性的可靠方案。
当使用 position: sticky 配合 z-index: -1 实现视差/遮罩揭示效果时，内部元素（如按钮）会因层级过低而无法响应点击事件；本文提供一种无需放弃视觉效果、仅通过 dom 结构优化与层级策略即可恢复交互性的可靠方案。
在 CSS 中，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 或后续兄弟元素）捕获。
✅ 正确解法：将可交互元素移出负 z-index 容器的 DOM 子树，使其成为同级元素，从而脱离该 stacking context 的限制。
以下是推荐的结构与样式重构：
<!-- ✅ 正确结构：按钮容器脱离 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 边界； - 避免在负 z-index 元素内嵌套交互控件——这是结构性陷阱，而非样式微调能解决；
- 若需响应式适配，建议用
clamp()或媒体查询调整transform偏移量，而非固定bottom: 50px； - 测试时务必在真实滚动场景中验证：按钮是否在 sticky 触发后仍持续可点（尤其在 iOS Safari 中需额外注意
touch-action行为）。
总结：实现「视觉上后置 + 功能上可用」的关键，在于分离渲染层级与交互层级——让视觉遮罩（负 z-index sticky section）和用户操作入口（同级定位按钮容器）分属不同 stacking context。这既保留了设计所需的沉浸式揭示动效，又保障了核心交互的可靠性。
