在 CSS 视差滚动开发中，将 position: fixed 与 background-attachment: fixed 混合使用，是许多前端开发者容易踩入的深坑——代码看似逻辑清晰，运行时却往往出现严重错位。据统计，90% 的失败并非语法错误，而是误以为这两种机制在渲染层级上等价。事实上，它们隶属于完全不同的渲染上下文体系。
为什么 background-attachment: fixed 无法响应 z-index
不少开发者给背景容器设置 z-index: 10，同时让内容层保持 z-index: 20，结果内容层仍然被牢牢压在下方，始终无法浮出。要解决这个问题，必须先理解一个核心差异：background-attachment: fixed 仅让背景图片“绘制在视口坐标系”中，它本身并不会创建独立的层叠上下文，因此无法参与 z-index 排序。真正决定层叠关系的，是元素自身的 stacking context（层叠上下文）。
background-attachment: fixed的背景图位于该元素的“背景绘制层”，与border、box-shadow处于同一层级，永远位于内容（content）之下。- 即使父容器设置了
z-index，只要未触发层叠上下文（例如未添加position: relative或transform），这个z-index就不会生效，形同虚设。 - 在移动端 Safari 以及 Chrome v99+ 中，浏览器会直接忽略非
body元素上的background-attachment: fixed，将其计算值强制改写为scroll，这才是导致问题的最根本原因。
用 position: fixed 搭建多层视差的关键结构
如果希望通过定位控制各层之间的位移差异，就必须放弃“固定背景图”的思路，改用真实的 DOM 元素来模拟景深效果。每个视差层都是一个独立的 position: fixed 元素，通过手动驱动实现位移。
- 所有视差层统一设置
position: fixed; top: 0; left: 0; width: 100%; height: 100vh;，先构建好舞台框架。 - 使用
z-index显式排序：远层z-index: 1、中层z-index: 10、近层z-index: 100。保留一定间隔，防止其他元素意外插入层序。 - 滚动时仅改变
transform: translateY()，例如layer.style.transform = `translateY(${scrollY * 0.3}px)`。 - 绝对不要使用
top或margin-top来控制位移——那会触发布局重排（layout），在 iOS 设备上性能极其低下。 - 为每层添加
will-change: transform，但建议仅在滚动开始后动态附加，避免在未滚动时消耗不必要的 GPU 资源。这一细节对整体性能影响显著。
background-attachment: fixed 的可用边界
这并不意味着 background-attachment: fixed 完全不可用，但其生效条件极为严格，不满足时等同于无效代码。
- 背景必须设置在
body或全屏容器（例如.parallax-section { min-height: 100vh; }）上，绝不能嵌套在任何使用了transform、filter或opacity < 1的父容器内部。 - 配套样式缺一不可：
background-size: cover、background-position: center、background-repeat: no-repeat，任何一项缺失都可能导致效果失效。 - 移动端基本不受支持。检测方法非常简单：打开 DevTools → Elements，查看 computed 样式中的
background-attachment实际值是否为fixed。如果显示为scroll，则说明已回退。 - 如果仅打算在 PC 端兜底，可以添加媒体查询：
@media (hover: hover) and (pointer: fine) { ... }。这样至少能确保在有鼠标的设备上正常表现。
滚动监听 + background-position 的兼容方案
这才是当前最稳定、最可控的降级方案，尤其适用于需要跨端展示或嵌套在任意模块中的场景。
- 将背景图设置在普通块级元素上，显式声明
background-attachment: scroll。 - 监听
scroll事件，并使用requestAnimationFrame进行节流，避免造成卡顿。 - 位移通过像素值计算：
element.style.backgroundPosition = `center ${window.scrollY * 0.4}px`。 - 不要混用百分比值——
background-position: 50% 50%属于锚点对齐逻辑，在滚动时换算复杂，极易出现跳跃现象。 - 如果背景图尺寸大于容器，优先使用
transform: translateY()来控制整个元素，而非调整背景位置。这样在性能层面更可控。
真正困难之处不在于写出一层滚动效果，而在于决策路径的选择：是否需要支持 iOS？是否允许使用 JavaScript？能否接受仅在 body 层级绑定？这些关键判断，比语法细节本身更直接影响最终效果。
