所有图片设 position: absolute 后没叠在一起，是因为它们默认以最近的非 static 定位祖先（如 relative）为参考，若无则回退至 body，导致散乱；必须给父容器显式设 position: relative 并确保其有宽高不塌陷。
为什么所有图片设 position: absolute 后没叠在一起？
因为 absolute 元素默认以最近的 position: relative（或 absolute/fixed）祖先为定位参考，但若父容器没设 position: relative，就会往上找 —— 常见结果是所有图片都相对于 body 定位，看起来散乱飞走。
- 必须给父容器显式加
position: relative，且不能是static（默认值） - 父容器最好有明确宽高，否则
absolute子元素可能溢出不可见 - 若父容器本身是 flex/grid 容器，
position: relative仍有效，但需注意子项的原始布局流已被脱离
z-index 不生效？顺序和层级关系怎么调
z-index 只对定位元素（relative/absolute/fixed）起作用，且只在同一个“层叠上下文”内比较。多个 absolute 图片若父容器没触发新层叠上下文，就直接按 DOM 顺序叠：后写的在上。
- 想严格控制上下顺序，给每张图加
z-index，数值越大越靠前 - 如果某张图被其他非定位兄弟元素挡住，说明它和那些元素不在同一层叠上下文里 —— 检查是否意外触发了
opacity、transform、filter等会创建新层叠上下文的属性 - 避免用大跨度数值（如
z-index: 9999），小范围递增（1,2,3）更可控
图片尺寸和定位偏移怎么算才不糊？
用 top/left 做像素偏移最直观，但容易因图片尺寸变化失效；用百分比或 transform: translate() 更灵活，尤其配合 object-fit。
- 推荐统一设
width: 100%+height: 100%再用top: 0; left: 0对齐起点，避免因图片原始尺寸不同导致错位 - 微调位置优先用
transform: translate(-50%, -50%)配合top: 50%; left: 50%居中，比纯top/left像素值更鲁棒 - 如果图片需要响应式缩放，别只靠
width: 100%，加上height: auto或object-fit: cover防止拉伸变形
父容器设了 relative，但图片还是跑出可视区？
常见原因是父容器没有内容撑开高度，或内部图片未设置宽高约束，导致父容器高度为 0，absolute 图片就按 0, 0 坐标飘到页面顶部左角去了。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器计算后的
height是否为0（浏览器开发者工具里看 computed 样式） - 给父容器设最小宽高，比如
min-height: 200px，或用伪元素::before { content: ""; display: block; padding-top: 56.25%; }维持宽高比 - 若图片是背景图，考虑改用
background-image+background-position，比多层absolute<img>更轻量、易控
display: contents）悄悄剥离定位上下文。 
