父容器必须设 position: relative，因为 absolute 元素会相对于最近的已定位祖先定位；若无则回退至 body 或视口，导致文字错位、飘出图片。
图片上加文字，父容器必须设 position: relative，文字用 position: absolute 才能精准贴合——否则文字会相对于整个页面或最近的定位祖先偏移，根本对不准。
为什么父级一定要 position: relative？
因为 position: absolute 的元素，会找「最近的已定位祖先」作为定位参考。如果父 <div> 没设 position（哪怕只设 relative），浏览器就继续往上找；找不到就落到 <body> 或视口，文字直接飘走。
常见错误现象：
文字出现在屏幕左上角、跑出图片范围、随滚动错位。
-
position: static（默认值）不算“已定位”，不能当参考 -
position: relative最安全：不改变文档流，只为子元素提供定位上下文 - 别用
position: absolute给父级——它会脱离文档流，可能撑不开高度、影响布局
absolute 文字怎么对齐到图片中心/右下角？
靠 top/left/right/bottom + transform 组合，不是单靠 margin 或 text-align。
立即学习“前端免费学习笔记（深入）”；
使用场景：标题居中、角标、水印、按钮覆盖。
- 居中文字：
top: 50%; left: 50%; transform: translate(-50%, -50%); - 右下角角标：
right: 8px; bottom: 8px;（不用transform，更轻量） - 避免用
top: 50%+margin-top: -XXpx：字体大小一变就错位 - 注意
z-index：确保文字在图片上方，尤其图片有z-index时
图片宽高不定时，absolute 文字还可靠吗？
可靠，但要防两种塌陷：
- 父容器没设宽高，且图片是异步加载（比如
<img src="..." />未加width/height属性）→ 父容器初始高度为 0 → 文字定位原点消失 → 文字位置乱跳 - 响应式图片（
max-width: 100%+height: auto）没问题，只要父容器能被图片撑开
实操建议：
给 <img> 加 width 和 height 属性（即使只是占位尺寸），或用 aspect-ratio 预留空间；CSS 中可写 img { display: block; } 防底部空白。
兼容性与性能小提醒
position: absolute 本身兼容性极好（IE6+），但要注意：
-
transform: translate()在 IE9+ 支持，IE8 及以下需回退到margin（不推荐，维护成本高） - 大量绝对定位文字层叠时，频繁重排影响性能——尤其是配合
scroll或hover动画时 - 移动端记得加
pointer-events: none到文字上（如果只是装饰），避免遮挡图片点击区域
真正容易被忽略的是：图片加载完成前，父容器高度为零，absolute 元素的定位基准就不存在——这比写错 top 值更难排查。
