通过定位（`position: absolute`）与容器包裹，可精准实现前景图叠加于背景图之上的效果，关键在于父容器设为 `relative`、子图设为 `absolute` 并合理控制层级与偏移。
要在网页中将一张图片（如 Logo 或装饰元素）精确叠加在另一张图片（如背景图）之上，不推荐直接对无容器的并列 <img> 标签使用 absolute 定位——这会导致元素脱离文档流后相互覆盖不可控，且难以响应式适配。
✅ 正确做法是：使用一个相对定位的父容器包裹两张图片，并对前景图应用绝对定位。这样既能保证布局稳定，又能自由控制叠加位置与层级。
✅ 推荐 HTML + CSS 实现方式：
<div class="image-overlay"> <img src="background.jpg" alt="Background" class="bg-image"> <img src="overlay.png" alt="Overlay" class="fg-image"> </div>
.image-overlay {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.bg-image {
width: 100%;
height: auto;
display: block;
}
.fg-image {
position: absolute;
top: 20px; /* 距顶部距离 */
right: 30px; /* 距右侧距离 */
width: 120px; /* 可独立设置尺寸 */
height: auto;
z-index: 10; /* 确保在背景图上方 */
}⚠️ 注意事项：
- 必须为父容器设置 position: relative：否则 absolute 子元素会相对于最近的已定位祖先（甚至 <body>）定位，导致错位。
- 避免仅依赖 margin-left / nth-child：原始方案中 img:nth-child(2) 的偏移方式脆弱且语义不清，无法响应式缩放，也不利于维护。
- 推荐使用 z-index 明确层级：尤其当叠加内容增多（如文字、按钮）时，可避免渲染顺序混乱。
- 若需背景图“拉伸填充”容器，建议用 background-image 替代 <img>；若需前景图保留语义或 SEO 价值（如 Logo），则 <img> 更合适。
? 进阶提示：
如需居中叠加，可用：
.fg-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}掌握这一模式后，你不仅能实现双图叠加，还可轻松扩展为多层图文组合、悬停特效、动态遮罩等复杂视觉布局。
立即学习“前端免费学习笔记（深入）”；
