CSS固定定位与背景附着属性打造视差滚动背景层

在 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 层级绑定？这些关键判断，比语法细节本身更直接影响最终效果。