当元素使用 gsap（如 scrolltrigger）配合 transform（如 translate）进行动画时，会意外创建新的层叠上下文（stacking context），导致 z-index 无法跨上下文生效；修复关键在于提升父容器的层叠层级，而非盲目增大按钮的 z-index。
当元素使用 gsap（如 scrolltrigger）配合 transform（如 translate）进行动画时，会意外创建新的层叠上下文（stacking context），导致 z-index 无法跨上下文生效；修复关键在于提升父容器的层叠层级，而非盲目增大按钮的 z-index。
在基于 GSAP + ScrollTrigger 实现视差滚动或平滑位移动画的页面中，常见一个困扰：固定定位的按钮（如 .enquire-btn）始终被滚动区域中的图片或面板遮挡，即使为其设置了 z-index: 999999999 也毫无作用。根本原因并非 CSS 写错，而是层叠上下文（stacking context）隔离所致。
? 为什么 z-index “失效”了？
CSS 的 z-index 仅在同一层叠上下文内生效。而以下任一条件都会触发新层叠上下文的创建：
- 元素设置了
position: relative/absolute/fixed/sticky且z-index值不为auto； - 元素应用了
transform、opacity 、<code>filter、will-change等属性（⚠️ 这正是问题根源！）； - 使用了
isolation: isolate或mix-blend-mode。
在你的代码中，.col__image-wrap 被赋予了：
.col__image-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* ← 触发新层叠上下文！ */
width: 100%;
height: 160vh;
}该 transform 使 .col__image-wrap（及其子元素如 <img alt="如何解决 GSAP 动画中 z-index 失效的问题" >）形成了独立于 <header></header> 的层叠上下文。此时，.enquire-btn 虽在 <header></header> 内设置了高 z-index，但它的层级只相对于 <header></header> 有效；而 <header></header> 默认处于文档流底层（z-index: auto），自然被后续具有层叠上下文的 .panel 区域覆盖。
✅ 正确解法：提升容器层级，而非按钮
无需修改 JS 或动画逻辑，只需在 CSS 中为 <header></header> 显式创建一个更高层级的层叠上下文：
header {
position: relative; /* 必须设置非 static 定位才能启用 z-index */
z-index: 1000; /* 值只需 > 后续 section 的隐式层级（通常为 0）即可 */
}同时，移除或注释掉按钮自身的 z-index（它在此上下文中已无意义）：
.enquire-btn {
/* z-index: 99999999999999999999; ← 删除此行 */
position: fixed;
top: 20px;
right: 20px;
background-color: #222;
color: #fff;
min-width: 150px;
padding: 10px 25px;
border-radius: 100px;
text-decoration: none;
font-weight: normal;
font-size: 14px;
}? 小贴士：
z-index: 1000已足够 —— 层叠层级是相对的，不是“越大越好”。过度使用超大数值（如999999999）反而掩盖了对层叠原理的理解，且可能在未来与其他库冲突。
? 验证与注意事项
-
检查 DOM 结构层级：确保
<header></header>在 HTML 中位于.panel等滚动内容之前（你当前结构符合）； -
避免多重 transform：若
.enquire-btn自身也加了transform（如动画），同样会创建新层叠上下文，需一并移除或统一管理； -
兼容性补充：
position: sticky和position: fixed在部分旧版 iOS Safari 中行为不一致，生产环境建议添加@supports检测或回退方案； -
Lenis 注意事项：
lenis.raf()不影响层叠逻辑，但确保其初始化在 DOM 加载后执行（你已用window.onload处理，合理）。
✅ 最终效果
添加上述两行 CSS 后，.enquire-btn 将稳定悬浮于所有 GSAP 动画区域之上，无论用户滚动至哪个 .panel，按钮始终可见、可点击 —— 不依赖 hack，符合 CSS 规范，且性能无损。
记住：z-index 不是“魔法数字”，而是层叠上下文内的相对坐标。理解上下文，才能真正掌控层叠。
