图片容器需设position: relative作为定位锚点，文字层用position: absolute配合top/left及z-index: 1定位并置顶，背景用rgba而非opacity，响应式推荐百分比坐标与transform垂直居中。
图片容器必须设为相对定位
绝对定位的元素要相对于最近的已定位祖先，如果父容器没设 position: relative，文字就会往上层找，很可能飞出图片区域甚至页面外。常见错误是只给文字加 position: absolute，忘了给图片外层套一层“锚点”。
实操建议：
- 用
<div class="img-wrapper"> 包住 <code><img>和文字，给.img-wrapper加position: relative - 避免直接在
或<main></main>上叠加文字——这些元素通常没定位，会导致定位基准错乱 - 如果图片本身是背景图（
background-image），那容器就是定位主体，不用额外加 wrapper - 文字层至少指定
top和left（比如top: 16px; left: 16px;），或用bottom/right做右下角水印 - 加
z-index: 1确保压在图片上；若图片有z-index: -1或父级有isolation: isolate，得同步调高文字层的层级 - 避免用
margin或transform: translate()替代top/left做定位——前者仍占文档流，后者在某些缩放场景下像素对不齐 - 写成
background-color: rgba(0, 0, 0, 0.6)，其中0.6是透明度，数值越小越透，但低于0.4通常字就看不清了 - 不要用
background: #0008（八位十六进制）——IE 完全不支持，iOS Safari 旧版本也有兼容问题 - 如果需要圆角或内边距，直接在文字容器上加
padding和border-radius，别试图用伪元素模拟背景 - 用
top: 5%、left: 5%这类百分比值，让文字始终贴图边缘一定比例位置 - 配合
max-width: 80%和white-space: nowrap; overflow: hidden; text-overflow: ellipsis防止长文字撑破容器 - 真要精准适配多尺寸，得用
@container查询（需现代浏览器支持）或 JS 监听图片加载后动态计算位置——但多数场景，百分比 +min/max-width已够用
文字层要用绝对定位+坐标控制位置
position: absolute 是核心，但光有它不够：没设 top/left 时，文字默认在原 HTML 位置（可能压不住图），而设了却没配 z-index 时，可能被图片盖住——尤其当图片用了 transform 或 will-change，会触发新层叠上下文。
实操建议：
半透明背景靠 background-color 的 rgba 实现
别用 opacity，它会让整个文字（包括字体）变透明，可读性暴跌。正确做法是给文字容器单独加一层带透明度的背景色，文字本身保持 100% 不透明。
实操建议：
响应式下文字位置容易偏移
固定 top: 20px 在小屏上可能把文字挤出图片，或者大图缩放后坐标失效。这不是 bug，是绝对定位天生的刚性——它认的是像素值，不随图片等比缩放。
实操建议：
最麻烦的其实是图片宽高比不固定时的垂直居中：用 top: 50%; transform: translateY(-50%) 比纯 top 值更可靠，但得确保文字容器高度可预测——这点很容易被忽略。
