使用 position: absolute 实现图片堆叠，父容器设为 position: relative 作为定位基准，通过 top、left 控制图片起始位置，z-index 调整图层顺序；结合 margin 对单张图片微调偏移，制造错落感，利用父元素 padding 控制整体内边距，避免内容贴边，三者协同实现自然堆叠效果。
要实现图片堆叠效果，可以使用CSS中的position: absolute结合margin和padding来控制布局与间距。关键在于理解定位机制和盒模型如何协同工作。
使用 absolute 定位实现图片堆叠
将多个图片设置为position: absolute，它们会脱离文档流并可以层叠在同一个位置上。父容器需要设置为position: relative，作为定位的参考点。
- 给父元素设置
position: relative - 所有图片设置
position: absolute - 通过
top、left等属性控制起始位置 - 使用
z-index控制图层上下顺序
示例代码：
.container {
position: relative;
width: 300px;
height: 200px;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
用 margin 调整图片偏移制造堆叠错位感
虽然absolute让图片重叠，但完全重合看起来单调。可以通过给每张图片添加不同的margin值，制造轻微偏移，形成视觉层次。
立即学习“前端免费学习笔记（深入）”；
-
margin在绝对定位中依然有效，但只影响元素自身位置 - 适合微调某张图片向右或向下“挪出”一部分
- 例如：第二张图加
margin-left: 10px; margin-top: 10px;形成错落感
注意：margin 不会影响其他绝对定位元素的位置，因为它们不占据空间。
利用 padding 控制容器内整体留白
如果希望堆叠区域周围有内边距（比如避免图片贴着容器边缘），可以在父容器上设置padding。
- 父元素加
padding: 20px可为整个堆叠组留出边距 - 子元素仍从
top: 0开始，实际显示会避开 padding 区域 - 适合统一控制外框空白，提升美观度
总结：absolute 实现层叠基础，margin 用于单图微调偏移，padding 用于整体内容与边界的距离控制。三者配合能做出自然的堆叠视觉效果。
基本上就这些，掌握好定位和盒模型的关系，调整起来就很灵活。
