用 position: absolute 叠加图片需父容器设 position: relative 以提供定位上下文，图片设 absolute 并显式指定 top/left，用 z-index 控制层级；注意避免触发新层叠上下文，推荐统一尺寸+aspect-ratio 实现响应式叠层。
用 position: absolute 叠加图片是最直接的方式
层叠本质是让多个元素脱离文档流、共享同一坐标空间。position: absolute 是最常用且兼容性最好的选择，但必须确保父容器有 position: relative（或 absolute/fixed），否则定位会相对于整个页面，导致图片飞出预期区域。
常见错误是只给图片加 position: absolute，却忘了给外层容器设定位上下文。结果就是所有图片都堆在浏览器左上角（top: 0; left: 0 默认值）。
- 外层容器必须设
position: relative - 每张图片设
position: absolute，并显式指定top和left（哪怕都是0） - 用
z-index控制叠放顺序：数值越大越靠前
图片尺寸不一致时，用 width 和 height 统一缩放更可控
原始图片宽高不同，直接叠加容易错位或裁切。CSS 的 width 和 height 配合 object-fit 能避免拉伸变形，但要注意：object-fit: cover 会裁剪，contain 会留白。
如果追求精确对齐（比如做图层蒙版或合成效果），建议提前用工具统一导出为相同尺寸，再用 CSS 控制显示大小；否则仅靠 max-width: 100% 无法保证各图在叠层中位置一致。
立即学习“前端免费学习笔记（深入）”；
- 推荐设固定宽高，如
width: 300px; height: 200px; - 搭配
object-fit: cover保持比例填充 - 避免只设
width不设height，否则高度随内容浮动，叠层错位
z-index 不生效？检查是否触发了新的层叠上下文
z-index 只在同一个层叠上下文中起作用。如果某个图片父元素设置了 opacity: 0.99、transform: translateZ(0) 或 will-change: transform，它就会创建新层叠上下文，导致内部子元素的 z-index 相对这个新上下文计算，而不是全局。
典型表现是：三张图按 1/2/3 设置 z-index，但第 3 张始终被第 1 张盖住——很可能中间某张图的祖先元素意外触发了层叠上下文。
- 排查方式：用浏览器开发者工具检查元素 computed 样式，看是否有
transform、opacity < 1、filter等属性 - 修复方法：移除不必要的视觉属性，或把所有图片放在同一层 DOM 深度下
- 简单原则：所有参与叠放的
<img>应为同级元素，且父容器不要加可能触发层叠上下文的样式
需要响应式叠层？优先用 aspect-ratio + max-width 替代媒体查询
移动端屏幕窄，固定像素的 top/left 容易让图片跑出视口。与其写一堆 @media 调整偏移量，不如用相对单位 + 容器约束来保形。
aspect-ratio（现代浏览器支持）能锁定容器比例，配合 max-width: 100% 和 position: absolute 的百分比偏移（如 top: 10%; left: 15%），可让叠层结构随容器缩放自动适应。
- 外层容器设
aspect-ratio: 4/3; max-width: 100%; - 图片定位改用百分比，如
top: 20%; left: 25% - 旧浏览器不支持
aspect-ratio？用padding-top技巧模拟（需额外内层 wrapper）
z-index 就失效，top 就飘走——这些细节比写几行 CSS 更容易卡住进度。 
