必须用 position: relative 的容器包裹图片和文字，因为 img 是替换元素不能作为定位上下文；仅给文字设 absolute 会导致其相对于 body 定位而偏移；居中需 top:50%;left:50%;transform:translate(-50%,-50%)；遮罩用 rgba 背景而非 opacity；注意堆叠上下文对 z-index 的限制。
直接用 position: absolute 叠加文字到图片上，必须给图片外层加一个 position: relative 容器——<img> 是替换元素，不能当定位上下文，强行给它设 position 会导致文字飞出页面或定位失效。
为什么文字总跑出图片区域？
常见错误是只给文字加 position: absolute，却没给父容器设 position: relative。浏览器会向上逐级查找已定位祖先，最终可能以 为参考点，导致文字出现在页面任意角落。
- 必须用
<div class="img-wrap"> 这类容器包裹 <code><img>和文字元素 -
.img-wrap要显式设position: relative，且最好加display: inline-block或width/height防塌陷 - 避免把文字直接塞进
<img>标签里——HTML 不允许，解析会出错 -
translate(-50%, -50%)是基于自身宽高偏移，比left: 50%; margin-left: -XXpx更可靠 - Bootstrap 用户可用
top-50 start-50 translate-middle三连类，但注意translate-middle依赖top和start同时存在 - 如果文字容器有
padding，居中基准仍是内容区左上角，不是 padding 边缘 - 别用
opacity给文字加半透明背景——它会让字体也变淡；改用background-color: rgba(0,0,0,0.6) - hover 显示文字时，若用
::after伪元素，必须包在position: relative容器里，否则::after无法精确定位 - 图片加载慢或失败时，容器若没设宽高，绝对定位文字会按 0×0 区域计算坐标，造成错位；建议加
aspect-ratio或显式height - 移动端缩放时，
em/rem单位在::after中易失准，优先用px或vw
文字居中但位置偏移？检查 transform 组合
用 top: 50%; left: 50% 再配 transform: translate(-50%, -50%) 才真居中；单靠 margin: auto 或 text-align: center 在绝对定位下无效。
文字看不清、被截断或闪动？
遮罩和交互问题往往源于层级和渲染机制，不是单纯调 z-index 能解决的。
真正容易被忽略的是堆叠上下文：如果图片父级用了 opacity: 0.99 或 will-change: transform，它就创建了新层叠上下文，此时文字的 z-index 只在该上下文内生效——哪怕设成 9999，也压不住同级其他上下文里的元素。
