z-index 在视差滚动中失效，因其仅在同层叠上下文中有效；而 transform 会创建新层叠上下文，使父级 z-index 失效。真正起作用的是 transform: translateZ() 创建的 Z 轴物理距离，如背景层设 translateZ(-100px)、内容层设 translateZ(0)，才能实现真实视差效果。
z-index 在视差滚动里根本不管用
很多人一想“分层”，立刻写 z-index，结果滚动时层叠关系乱套、元素错位、甚至完全看不见——因为 z-index 只在同一个层叠上下文（stacking context）里生效，而视差滚动通常靠 transform 触发新层叠上下文，直接让父级的 z-index 失效。
真正起作用的是：谁先被 transform（哪怕只是 transform: translateZ(0)），谁就创建自己的层叠上下文，后续所有 z-index 都只在这个新上下文里比大小。
- 背景层加
transform: translateZ(-100px)，内容层加transform: translateZ(0)，才能形成物理意义上的前后距离 - 纯靠
z-index: 1和z-index: 2在同一容器里设，滚动时不会产生视差感，只是简单遮挡 - 如果用了
will-change: transform或opacity，也可能意外创建层叠上下文，干扰原有层级
transform: translateZ() 是核心，但浏览器兼容性得盯紧
translateZ() 是实现 Z 轴位移最直接的方式，但它依赖 3D 渲染管线，不是所有环境都稳：
- 旧版 Safari（translateZ() 在
position: fixed元素上支持差，会出现跳变或失效 - 部分安卓 WebView（尤其 Android 9 以下）会忽略
translateZ()，退化为 2D 平移，失去深度感 - IE 完全不支持
translateZ()，连带整个 3D transform 都挂掉，必须另配降级方案（比如用background-position模拟） - 实际写法推荐用
transform: translate3d(0, 0, -50px)替代translateZ()，兼容性略好，且明确启用 GPU 加速
滚动监听 + transformY 组合才是真视差，别硬套 scroll-snap
单纯用 CSS scroll-snap 或 overflow-anchor 做不了视差——它们只控制滚动停靠点和锚定行为，不提供位移映射能力。
立即学习“前端免费学习笔记（深入）”；
真视差必须靠 JS 监听 scroll 或 scrollend，把滚动偏移量按比例映射到各层的 transform: translateY() 上：
- 背景层移动慢（比如
0.2 * scrollY），中景层稍快（0.6 * scrollY），前景层同步（1.0 * scrollY） - 别用
top/margin-top动画，重排开销大；必须用transform，走合成器线程 - 监听函数要加
passive: true，否则 iOS Safari 会强制同步执行，卡顿明显 - 示例关键行：
element.style.transform = `translateY(${offset * 0.3}px)`;
移动端 touchmove 事件容易漏处理，导致视差断层
PC 端靠 scroll 事件够用，但 iOS/Android 的原生滚动是异步的，scroll 事件触发滞后，用户手指一抬，视差层就“掉帧”卡在半空。
- 必须同时监听
touchstart+touchmove，用event.touches[0].pageY实时算位移 - 不能只依赖
scrollY，它在 touch 过程中可能还是旧值；要用scrollTop+ 自己维护的 drag offset - 开启
{ passive: false }才能调用preventDefault()，阻止默认滚动以获得完全控制权（但代价是失去惯性滚动，需自己模拟） - 很多库（如
locomotive-scroll）默认关掉touch支持，得手动开smooth: false或换用gsap配合ScrollTrigger
视差的本质不是“堆 z-index”，而是用 transform 构建空间坐标系，再靠滚动输入实时更新每个坐标的投影位置。中间任何一环没对齐——比如层叠上下文错层、Z 轴单位混用 px/rem、touch 和 scroll 两套逻辑不互通——就会出现局部漂移、闪动或完全静止不动。
