通过定位（position: absolute）和容器包裹，可精准实现图片层叠效果，关键在于父容器设为 relative，子元素设为 absolute 并配合偏移控制层级与位置。
在网页开发中，将一张图片作为前景“叠加”在另一张背景图片之上，是常见的视觉布局需求（如 Logo 覆盖、水印、头像框、图文合成等）。单纯并列写两个 标签默认是流式排列，无法自然重叠——必须借助 CSS 定位机制实现图层控制。
✅ 正确做法是：使用一个相对定位的容器包裹所有图片，再将需叠加的图片设为绝对定位。这样既能确保定位基准统一，又能避免影响页面其他内容流。
下面是一个简洁、健壮且语义清晰的实现示例：
.image-overlay {
position: relative;
width: 400px;
height: 400px;
}
.bg-image,
.fg-image {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例填充 */
}
.bg-image {
display: block; /* 消除底部空白 */
}
.fg-image {
position: absolute;
top: 20px;
left: 20px;
z-index: 10; /* 确保在背景之上（可选，默认已覆盖） */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须为父容器（.image-overlay）设置 position: relative，否则 absolute 子元素会相对于最近已定位祖先或视口定位，易导致错位；
- 避免直接对无容器的多个
使用 position: absolute（如原答案中未包裹的写法），这会使它们脱离文档流且相互干扰，难以维护； - 推荐使用 object-fit: cover 或 contain 替代固定宽高，提升响应式兼容性；
- 若需支持透明 PNG 或阴影效果，可额外添加 filter: drop-shadow(...) 或 opacity 等增强表现力。
总结：图片叠加不是靠“谁写在后面”，而是靠定位上下文 + 层级控制。掌握 relative + absolute 的组合范式，即可稳定、灵活地构建任意图片叠加布局。
