直接用 position: absolute 铺满会错位，因 absolute 定位基准是最近已定位祖先，若父容器未设 position: relative，则回退至 body 或视口定位，而 body 默认不占满全屏且含默认边距，导致计算失准；须设父容器 position: relative、width: 100vw、height: 100vh，并清空 html 和 body 的 margin/padding。
为什么直接用 position: absolute 铺满会错位
很多人一上来就给每个碎片元素写 position: absolute; top: 0; left: 0;，结果所有小块全叠在左上角。根本原因是：absolute 的定位基准是「最近的已定位祖先」，如果父容器没设 position: relative，它就会往上找——最终相对 body 或视口定位，而 body 默认不占满全屏，导致计算失准。
必须确保父容器满足两个条件：
-
position: relative（提供定位上下文） -
width: 100vw; height: 100vh;（真·铺满视口，不是靠内容撑开） - 同时清除
html和body的默认margin和padding
如何让碎片随机分布又不重叠、不露白
纯靠手写 top/left 值不可维护，也难响应式。推荐用 CSS 自定义属性 + calc() 混合生成位置，再配合 JS 动态注入（或构建时生成）更可控。
核心思路是：把视口划分为网格，每个碎片落在一个格子内，用 transform: translate() 微调偏移，避免硬编码坐标：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); - 每个碎片元素用
grid-column/grid-row占据一个格子 - 再加
transform: translate(var(--tx, 0), var(--ty, 0));做局部扰动 - 用
z-index控制层叠顺序，数值从 1 开始递增，别用负值（易被父上下文截断）
background-image 和多 div 碎片哪个更合适
如果你只是要静态视觉效果，background-image 支持多层（逗号分隔），性能更好、DOM 更轻。但碎片化背景通常需要每块独立缩放、旋转、透明度变化，甚至绑定 hover 动画或点击事件——这时必须用真实 div 元素。
注意几个实际代价：
- 每多一个
div就多一次重排风险，超过 50 个建议用will-change: transform提前升层（但别滥用，移动端可能触发额外合成） - 所有碎片容器必须设
pointer-events: none，否则会拦截下层内容点击 - 用
background-size: contain+background-position: center控制单图缩放，别用width/height固定尺寸，否则高宽比失真
移动端适配和滚动时的常见崩坏点
在 iOS Safari 或安卓 Chrome 上，100vh 在地址栏收起/展开时会跳变；另外 background-attachment: fixed 在移动端基本无效，且可能触发渲染异常。
稳妥做法：
- 用
min-height: 100dvh替代100vh（dvh是动态视口单位，2023 年起主流浏览器已支持） - 禁用
background-attachment，改用transform: translateY()模拟视差（监听scroll事件控制） - 碎片元素加
contain: layout paint，告诉浏览器“你不用管我跟其他元素的关系”，减少重绘范围 - 避免在碎片上用
filter: blur()或大尺寸box-shadow，它们在低端机上极易掉帧
最常被忽略的是堆叠上下文：只要父容器有 opacity、transform、filter 或 will-change，子元素的 z-index 就只在该容器内生效。想跨层控制层级？要么扁平化结构，要么统一把所有碎片挂到同一个 position: relative 根节点下。
