background-attachment: fixed 背景图看似未固定，实因默认渲染在内容层之上，需主动设父容器 position: relative 并给伪元素 ::before 设 z-index: -1 且避免隐式堆叠上下文干扰。
固定背景图能“衬底”，但常被内容盖住——根本不是 background-attachment 没生效，而是它默认出现在内容层之上，得主动压到后面。
background-attachment: fixed 为什么看起来没动
常见错误现象：background-attachment: fixed 写了，滚动时背景图却跟着动，或一闪而过；更隐蔽的是：它其实固定了，但被文字、卡片等元素完全遮挡，误以为失效。
原因很直接：fixed 背景图默认渲染在 z-index: 0 层级（或 auto），而大多数内容容器（比如 .content、.card）哪怕没显式设 z-index，只要用了 position: relative 或 transform，就自动创建新堆叠上下文，把自身内容提到了更高视觉层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给承载固定背景的容器加
position: relative（必须，否则z-index无效） - 立刻设
z-index: -1—— 不是z-10或z-50，Tailwind 的预设值不够低，得用z-[-1]或原生z-index: -1 - 确保该容器没有
transform、filter、opacity等会隐式创建堆叠上下文的属性
用伪元素实现更稳妥的固定背景层
直接在结构元素上设 background-attachment: fixed 容易和内容样式耦合，一改就错位。用 ::before 分离背景逻辑更可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 容器本身只负责定位参考：
position: relative -
::before设为position: absolute; top: 0; left: 0; width: 100%; height: 100% -
::before加background-image和background-attachment: fixed - 关键：给
::before设z-index: -1，且父容器不能有isolation: isolate或其他干扰层叠的声明
示例片段：
.hero {
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url(/bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: -1;
}
移动端 Safari 的 fixed 背景错位怎么办
现象：iOS Safari 滚动时背景图突然跳动、缩放、甚至消失半秒；键盘弹出后位置偏移。
这不是 bug，是 Safari 把「视口」理解为地址栏 + 内容区的动态组合，background-attachment: fixed 锚点会随视口重算漂移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先降级：对
@supports not (background-attachment: fixed)或screen and (max-width: 768px)，改用background-attachment: scroll - 避免在
<body>或根容器上直接设 fixed 背景，改用局部模块（如.section-hero）控制范围 - 不依赖
background-position: center center做精确定位，改用background-position: 50vw 50vh配合transform: translate(-50%, -50%)更稳定
z-index: -1 的兼容性与风险点
看似简单，但 z-index: -1 在某些场景下会“消失”：
- 父容器若设了
overflow: hidden，且自身没创建新堆叠上下文，z-index: -1元素会被裁剪掉（即使它本该在背后） - IE11 不支持
z-index: -1用于非定位元素，但你已加了position: absolute或relative，所以没问题 - React/Vue 组件中，如果背景层被 Teleport 到
<body>外，z-index: -1会相对于<body>生效，可能压不住其他 Portal 内容——此时必须统一所有 Portal 目标节点的层级策略
真正容易被忽略的是：你设了 z-index: -1，但忘了父容器本身是否已有 z-index: 0 或更高值。一旦父容器形成堆叠上下文，子元素的 -1 就只是在这个上下文里的“最底下”，而非整个页面最底下。查 Layers 面板比猜更可靠。
