通过绝对定位（position: absolute）配合父容器相对定位，可精准控制多张图片的层叠关系，实现前景图覆盖背景图的效果。
在网页开发中，将一张图片作为前景“叠加”在另一张背景图之上，是常见的视觉布局需求（例如头像徽章、水印图标、产品贴图等）。关键不在于“谁在谁上面”，而在于建立正确的定位上下文与层叠顺序。
✅ 正确做法：使用 position: relative + position: absolute
仅对 <img> 元素直接设置 absolute 是无效的——因为绝对定位元素会相对于最近的已定位祖先（即 position 值为 relative/absolute/fixed/sticky 的父级）进行偏移。若无这样的祖先，它将相对于 <body> 定位，极易脱离预期布局。
✅ 推荐结构如下：
<div class="image-overlay"> <img src="background.jpg" alt="背景图" class="bg-image"> <img src="overlay.png" alt="前景图" class="fg-image"> </div>
.image-overlay {
position: relative; /* 创建定位上下文 */
width: 400px;
height: 300px;
}
.bg-image {
width: 100%;
height: 100%;
display: block;
}
.fg-image {
position: absolute;
top: 20px; /* 距顶部20px */
left: 30px; /* 距左侧30px */
width: 80px;
height: 80px;
z-index: 10; /* 确保在背景之上（可选，默认文档流后绘制） */
}? 提示：z-index 在同一定位上下文中才生效；若前景图仍被遮挡，请检查是否被其他元素（如父容器 overflow: hidden）裁剪，或存在更高 z-index 的兄弟元素。
⚠️ 常见误区与注意事项
- ❌ 错误：直接给所有 <img> 设 position: absolute 且无父级 relative → 图片会从 <body> 原点堆叠，难以控制。
- ❌ 错误：依赖 margin-left 移动第二张图（如原答案所示）→ margin 对 absolute 元素仅在非定位方向起作用，且无法精确定位，语义混乱。
- ✅ 最佳实践：始终用 top/right/bottom/left 配合 absolute 控制位置，并确保父容器有 position: relative。
- ? 若需响应式叠加（如居中徽章），可用 transform: translate(-50%, -50%) 配合 top: 50%; left: 50% 实现完美居中。
掌握这一模式，不仅能解决双图叠加，也为更复杂的图层动画、卡片悬停效果、自定义控件打下坚实基础。
立即学习“前端免费学习笔记（深入）”；
