要让文字覆盖在图片上，需为图片容器设position: relative建立定位上下文，文字元素用position: absolute配合top/left等偏移定位，并可借助z-index控制层叠顺序，响应式建议使用相对单位。
要让文字覆盖在图片上，核心是用 CSS 定位（position）控制图层堆叠顺序，配合 z-index 确保文字显示在最上层。关键不在于“覆盖”本身，而在于建立正确的定位上下文和层叠关系。
给图片容器设相对定位
图片本身通常放在一个容器（如 <div>）里。这个容器需设置 position: relative，作为后续绝对定位元素的参考父级。不设这一步，absolute 会往上找最近的已定位祖先，容易错位或脱离预期范围。
- HTML 示例：
<div class="img-wrap">
<img src="photo.jpg" alt="">
<p class="caption">这是标题</p>
</div> - CSS 中先写：
.img-wrap { position: relative; }
文字用绝对定位并指定偏移
文字元素（如 <p> 或 <span>）设为 position: absolute，然后用 top、left（或 bottom、right）把它“钉”在容器内合适位置。它会脱离文档流，自然浮在图片上方。
- 常用写法示例：
.caption {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,.6);
} - 如果想居中叠加，可用：
top: 50%; left: 50%; transform: translate(-50%, -50%);
必要时调整 z-index 层级
当容器内有多个定位元素（比如图标+文字+遮罩），可能需要显式设置 z-index 控制谁在上谁在下。数值越大越靠前。注意：z-index 只对定位元素（relative、absolute、fixed、sticky）生效。
立即学习“前端免费学习笔记（深入）”；
- 例如让文字始终在最上：
.caption { z-index: 10; } - 若图片上有半透明遮罩层，可设：
.overlay { position: absolute; top: 0; left: 0; z-index: 5; }
响应式与兼容性小提醒
在移动端，文字大小和位置容易错位。建议用 em 或 rem 控制字体，用百分比或 vw/vh 调整定位偏移；避免固定像素值。所有现代浏览器都支持 position 和 z-index，IE8+ 也完全可用，无需额外兼容处理。
