绝对定位的层叠顺序由z-index决定，脱离文档流后仅取决于z-index值和堆叠上下文；父容器触发新上下文（如opacity、transform）会使子元素z-index作用范围受限。
绝对定位的层叠顺序由z-index决定，不是写在后面就自动在上面
很多人以为HTML里后写的元素默认盖在前面元素上，但position: absolute脱离文档流后，层叠行为只看z-index值和堆叠上下文。没设z-index时，同级元素按源码顺序叠加，但一旦父容器创建了新的堆叠上下文（比如设置了opacity、transform或will-change），子元素的z-index就只在该上下文内生效，跨上下文比较无效。
实操建议：
- 给每层背景容器明确设置
z-index，数值递增（如1、2、3） - 确保所有需要参与层级控制的容器都在同一个堆叠上下文中——检查父级是否意外触发了新上下文
- 避免用
z-index: auto或不设值，它等价于0，且不创建新层叠上下文 - 调试时用浏览器开发者工具的“Layers”面板或勾选“Show paint rectangles”，确认实际渲染层级
多层背景用多个div比用background-image更灵活但更耗DOM
纯CSS背景图（background-image）最多支持逗号分隔的多层，但每层无法独立控制尺寸、位置动画或交互响应；而用多个div + position: absolute，每层都是真实元素，可绑定事件、加过渡、做视差滚动，代价是DOM节点变多、重排风险上升。
实操建议：
- 静态背景图优先用
background-image: url(a.jpg), url(b.png)，配合background-position和background-size分层控制 - 需要独立缩放、位移、透明度变化的层（比如飘动的云、浮动的粒子），才用
div+absolute - 每层容器设
pointer-events: none，避免遮挡下层点击（除非你真需要拦截） - 移动端注意
will-change: transform可能触发额外合成层，慎用
父容器必须设position:relative才能让子absolute正确参照
position: absolute的定位基准是最近的「已定位祖先元素」（即position为relative、absolute、fixed或sticky）。如果漏设父容器的position: relative，子元素会一路往上找，最终相对于body或viewport定位，导致偏移失控。
常见错误现象：
- 页面滚动时某层背景突然“飞走”
- 响应式断点切换后，背景层位置错乱
- 嵌套组件中背景层出现在完全无关的位置
实操建议：
- 每个用于承载绝对定位背景的容器，第一行CSS就写
position: relative - 不要依赖全局样式或重置CSS隐式设置，显式声明更可靠
- 用
outline: 1px solid red临时调试，确认定位参考框是否符合预期
用transform替代top/left做动画性能更好
直接改top或left触发布局（Layout）+ 绘制（Paint），帧率容易掉；而transform: translateX()只影响合成层，GPU加速，尤其适合循环动画（如视差滚动、微动效）。
实操建议：
- 动画场景一律用
transform: translateX(…)、translateY(…)代替top/left - 若需同时控制缩放或旋转，
transform天然支持组合：transform: translateX(20px) scale(0.95) - 避免对
transform频繁读取（如getBoundingClientRect()），会强制同步回流 - 必要时加
will-change: transform提前提示浏览器，但别滥用
最常被忽略的是堆叠上下文的隐式创建——一个opacity: 0.99或transform: rotate(0deg)就可能让整组背景层“集体降级”，再调z-index也没用。调不出来的时候，先查父级有没有悄悄触发新上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
