用 position: absolute 实现图片层叠需让悬浮图脱离文档流并相对设了 position: relative 的父容器定位，同时用 z-index 确保层级，并推荐 transform: translate() 替代 top/left 实现高性能、响应式精确定位。
用 position: absolute 实现图片层叠
两张图片重叠，本质是让其中一张脱离文档流、相对父容器定位。最直接可靠的方式就是给外层容器设 position: relative，再把要悬浮的图片设为 position: absolute。
常见错误现象：悬浮图没出现、跑出屏幕、压不住底图——基本都是因为父容器没设 position: relative，导致 absolute 相对的是 body 或最近的定位祖先，而不是你想要的那张底图容器。
- 底图用
<img alt="html如何使一张图片悬浮在另一张图片" >放在普通<div> 里，这个 <code><div> 必须加 <code>position: relative - 悬浮图也用
<img alt="html如何使一张图片悬浮在另一张图片" >，但需加position: absolute和top/left（或right/bottom）来控制位置 - 如果悬浮图比底图小，建议加
z-index: 1明确层级，避免被其他元素意外遮挡 - 确保两张图在同一个定位上下文里（即共享同一个
position: relative父容器） - 底图本身不用设
z-index，默认是auto；悬浮图设z-index: 1就够用 - 避免用超大数值如
z-index: 9999，后期调试时容易冲突 - 替换
top: 20px; left: 30px为transform: translate(30px, 20px) -
translate()的坐标系和top/left相反：第一个参数是 X（右为正），第二个是 Y（下为正） - 注意：如果父容器有
overflow: hidden，transform不会触发裁剪失效，而top/left移出区域可能被截断 - 推荐写法：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 让悬浮图中心对齐父容器中心 - 若需对齐底图某个角（比如右上角），用
top: 0; right: 0; transform: translate(0, 0)，再配合margin微调 - 不要依赖 JavaScript 计算位置，除非必须动态响应图片加载尺寸变化；纯 CSS 方案更稳定、更快
用 z-index 控制谁在上面
z-index 只对定位元素（position 不是 static）生效。它不是“越大越上”，而是“同级定位上下文里，值大者在上”。容易忽略的是：如果两个图片分别在不同父容器里，且父容器的 z-index 不同，子元素的 z-index 再大也无效。
用 transform: translate() 微调悬浮图位置更安全
直接改 top/left 会触发浏览器重排（reflow），而 transform: translate() 只触发重绘（repaint），性能更好，尤其在需要动画或频繁移动时。
立即学习“前端免费学习笔记（深入）”；
响应式下悬浮图错位怎么办
用固定像素（如 top: 50px）定位，在不同屏幕尺寸下必然错位。真正靠谱的做法是用百分比 + transform 组合，或者借助 CSS 自定义属性动态计算。
最常被跳过的一步：检查悬浮图的 width 和 height 是否被父容器或全局样式意外限制。一张没设宽高的 <img alt="html如何使一张图片悬浮在另一张图片" > 在 absolute 下可能塌缩成一条线，这时候再调 z-index 也没用。
