必须用 position: relative 包裹图片和文字，否则文字会相对于 body 定位而飘出图片区域；因绝对定位元素只认最近已定位祖先，img 无法充当定位上下文，需额外容器提供坐标系。
必须用 position: relative 包裹图片和文字，否则文字会相对于 body 定位，直接飘出图片区域。
为什么文字总不贴着图片？——父容器没设 position: relative
绝对定位元素（比如文字层）只认「最近的已定位祖先」。img 是替换元素，设 position: relative 也撑不起定位上下文；不加包裹容器的话，浏览器就一路往上找，最终以 body 为参考点。
- 常见错误现象：
.caption出现在页面左上角、滚动时错位、换图后位置乱跳 - 正确结构必须是：
<div class="img-wrap"> <img><div class="caption"></div> </div> -
.img-wrap只需position: relative，不用改top或left，它本身不偏移，只为子元素提供坐标系 - 别给
img单独设position—— 它不能当定位容器，强行加只会让文字失去锚点
文字遮罩背景变淡、字看不清？——别用 opacity，改用 rgba()
opacity 会让整个元素（包括文字）一起透明，而遮罩真正要压暗的是图片底色，不是削弱文字可读性。
- 正确写法：
background-color: rgba(0, 0, 0, 0.6)，文字颜色保持color: white - 如果用了
opacity: 0.6，字体也会发虚，尤其小字号在 Retina 屏上更糊 - 渐变遮罩可用：
background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) - IE8 不支持
rgba，老项目得配半透 PNG 背景图，但 2026 年绝大多数场景可放心用
文字居中总偏一点？——transform: translate() 比 margin 更稳
靠 top: 50%; left: 50% 只定位到元素左上角，再用 margin 手动减去宽高一半，一旦字体大小或 padding 变了就得重调。
- 推荐组合：
top: 50%; left: 50%; transform: translate(-50%, -50%) - 这个偏移是基于自身内容区计算，跟字体、行高、padding 都无关
- 右下角角标等固定偏移场景，直接用
right: 8px; bottom: 8px更轻量，不用transform - 如果文字容器有
padding，translate依然以内容区左上角为原点，不会误算边距
图片加载慢时文字乱飞？——父容器高度塌陷才是真凶
图片异步加载或加载失败时，若父容器没显式高度，它会坍缩成 height: 0，导致绝对定位文字失去定位基准，直接回退到 body 坐标系。
- 最简单防塌陷：给包裹容器加
min-height（如min-height: 200px）或aspect-ratio: 16/9 -
img标签建议补上width和height属性（哪怕只是占位值），避免 FOUC - 响应式图片加
max-width: 100%; height: auto;没问题，前提是容器能被撑开 - 移动端注意：
em/rem在伪元素里易失准，关键偏移量优先用px或vw
真正容易被忽略的是堆叠上下文：如果图片父级用了 opacity: 0.99、will-change: transform 或 filter，它就创建了新层叠上下文，此时文字的 z-index 再大，也压不住同级其他上下文里的元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
