绝对定位实现图片堆叠必须配合 position: relative 的父容器，否则图片会相对于 body 定位而重叠；z-index 控制层级，transform 比 top/left 更适合响应式错位且性能更优。
绝对定位能实现图片堆叠，但必须配合 position: relative 的父容器，否则所有图片都会相对于 body 定位，全部挤在左上角——这是最常踩的坑。
父容器必须设 position: relative
这是整个堆叠逻辑成立的前提。没有它，position: absolute 的图片会向上查找最近的已定位祖先；找不到就落到 body，导致多张图错位或重叠失控。
- 父容器只需声明
position: relative，无需设置top/left等偏移值 - 建议同时加
display: inline-block或明确width/height，防止容器因子元素脱离文档流而塌陷为 0 高度 - 如果父容器本身是 flex 或 grid 项目，
relative依然有效，但需注意其自身尺寸是否被父级约束
top 和 left 控制起始锚点，z-index 决定谁在上层
所有图片设 position: absolute 后，默认都从父容器左上角（top: 0; left: 0）开始定位。靠 z-index 区分层级，数值大的盖在上面。
-
z-index只对定位元素（relative/absolute/fixed）生效，普通static元素不参与比较 - 不要依赖 HTML 顺序来控制叠放——万一后续加了新样式或 JS 动态插入，顺序就不可靠
- 若需微调某张图的位置，直接改它的
top/left，别用margin模拟，后者在绝对定位中语义模糊且易混淆
用 transform 做自然错位，别硬调 top/left
纯靠 top/left 手动排布多张图，维护成本高，响应式也难适配。用 transform: translate() 或 rotate() 做轻微偏移，视觉更生动，且不影响布局计算。
-
transform不触发重排（reflow），只影响重绘（repaint），性能更好 - 例如：
img:nth-child(2) { transform: translate(8px, -5px) rotate(2deg); } - 注意：
transform不改变元素在文档流中的“占位”，所以不会影响其他绝对定位兄弟元素的位置
真正麻烦的是当画廊要响应式缩放时——top/left 用像素值就僵死了，改用百分比或 vw/vh 要小心父容器尺寸波动；而 transform 的相对偏移反而更稳。这点容易被忽略，直到在 iPad 上测试时发现堆叠位置全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
