用 position: absolute 实现文字叠加在图片上，核心是将文字层设为绝对定位、图片容器设为 relative 以提供定位参考；需包裹图文、显式设置容器宽高、控制 z-index 和响应式适配。
用 position: absolute 实现文字叠加在图片上，核心是让文字层脱离文档流、精准定位到图片内部区域。关键不在“覆盖”，而在“相对图片容器定位”。
图片容器必须设为 relative
绝对定位元素（文字）的参考点，是其最近的已定位祖先元素。如果直接对图片设 absolute，文字会相对于整个页面定位，极易错位。正确做法是：把图片和文字一起包进一个父容器，并给该容器设 position: relative。
- HTML 结构示例：
<img src="photo.jpg" alt="风景">
<div class="caption">这是标题</div>
</div>
- CSS 示例：
position: relative;
display: inline-block; /* 防止容器塌陷 */
}
.caption {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-weight: bold;
}
文字位置可灵活控制
top、right、bottom、left 的组合能精确定位文字在图片中的位置。比如居中显示标题，可用 transform 配合百分比定位：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.6);
padding: 8px 16px;
}
这样文字真正水平垂直居中，不受字体大小或容器宽高影响。
立即学习“前端免费学习笔记（深入）”；
避免文字被截断或溢出
图片容器若未设置宽高，而图片又加载失败或异步加载，可能导致绝对定位文字位置异常。建议：
- 给
.img-wrap显式设置width和height（或使用aspect-ratio） - 图片加
max-width: 100%; height: auto;保证响应式缩放 - 文字层加
z-index: 2（图片默认 z-index 为 auto，值为 0），确保始终在上层
适配移动端需注意
小屏幕下文字可能重叠、过小或超出边界。推荐做法：
- 用
em或rem设置文字大小和偏移量，随根字体缩放 - 媒体查询中调整
top/left值或font-size - 必要时用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;处理长文本
