background-attachment: fixed 无法通过 z-index 控制层级，因其不创建层叠上下文且移动端普遍失效；真视差需用 position: fixed 元素配合 z-index 与 transform 实现。
直接说结论：用 background-attachment: fixed 实现视差，根本无法靠 z-index 控制层级位移——它不产生新层叠上下文，也不响应 z-index，更在移动端集体失效。
为什么 background-attachment: fixed + z-index 无效
很多人试图这样写：
.bg-layer { background-attachment: fixed; z-index: 1; }
.content { z-index: 2; }
结果发现 .content 仍被盖住，或滚动时层叠顺序乱跳。原因很实在：
-
background-attachment: fixed的背景图是“画”在当前元素的背景层上的，它不属于独立渲染层，z-index对它完全不起作用 - 真正决定谁在上谁在下的，是元素自身的层叠上下文（stacking context）和绘制顺序，而
background-attachment不创建新上下文 - 即使给父容器设了
z-index，只要没触发层叠上下文（比如没设position、transform等），z-index就是摆设
想用 Fixed 定位做视差？先认清它的定位本质
这里的 “Fixed 定位” 指的是 position: fixed 元素，不是 background-attachment: fixed。二者常被混为一谈，但行为天差地别：
-
position: fixed元素会脱离文档流，相对于视口定位，天然拥有自己的层叠上下文 - 它能响应
z-index，但必须配合显式position（如relative或absolute）的父容器才能稳定嵌套 - 常见错误：把
position: fixed层塞进overflow: hidden的父容器里——它会逃逸出裁剪区，位置失控 - 更隐蔽的坑：多个
position: fixed元素若未设相同父级层叠上下文，z-index数值比较可能跨上下文失效
真要靠 Fixed + Z-index 做多层视差，得这么搭结构
必须放弃“背景图固定”的幻想，改用真实 DOM 层模拟深度。核心是让每层都成为可独立控制的 position: fixed 元素，并手动计算偏移：
- 所有视差层统一设
position: fixed; top: 0; left: 0; width: 100%; height: 100vh; - 用
z-index显式排序：z-index: 1（远层）、z-index: 10（中层）、z-index: 100（近层），留足余量防插队 - 滚动时用 JS 动态改
transform: translateY()，例如：layer.style.transform = `translateY(${scrollY * 0.2}px)` - 绝对不要用
top或margin-top驱动位移——触发重排，iOS 上一卡一个准 - 每层加
will-change: transform，但只在开始滚动后才加，避免空转耗资源
iOS Safari 下 Fixed 层突然消失或错位
这不是 CSS 写错了，是 Safari 对 position: fixed 的合成策略限制：
- 当页面有
transform、perspective或filter等属性时，Safari 可能强制将fixed层降级为absolute行为 - 解决办法：给
html和body加height: 100%; overflow-x: hidden，确保滚动容器明确；监听document.scrollingElement.scrollTop而非window.scrollY - 更稳妥的兜底：检测到 iOS Safari 时，自动切换为
position: absolute+transform滚动方案，用touchmove事件配合preventDefault()（记得加{ passive: false }）
容易被忽略的是：Fixed 层一旦参与 3D 变换（比如父容器有 perspective），它的定位基准就从“视口”悄悄变成了“最近的 3D 上下文”，偏移量会失真——所以别把 position: fixed 和 transform-style: preserve-3d 混着用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
