CSS图片上加文字，父级相对定位，子级绝对定位

常见错误现象：
文字出现在屏幕左上角、跑出图片范围、随滚动错位。

• 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 文字还可靠吗？

可靠，但要防两种塌陷：

• 父容器没设宽高，且图片是异步加载（比如 未加 width/height 属性）→ 父容器初始高度为 0 → 文字定位原点消失 → 文字位置乱跳
• 响应式图片（max-width: 100% + height: auto）没问题，只要父容器能被图片撑开

实操建议：
给 加 width 和 height 属性（即使只是占位尺寸），或用 aspect-ratio 预留空间；CSS 中可写 img { display: block; } 防底部空白。

兼容性与性能小提醒

position: absolute 本身兼容性极好（IE6+），但要注意：

• transform: translate() 在 IE9+ 支持，IE8 及以下需回退到 margin（不推荐，维护成本高）
• 大量绝对定位文字层叠时，频繁重排影响性能——尤其是配合 scroll 或 hover 动画时
• 移动端记得加 pointer-events: none 到文字上（如果只是装饰），避免遮挡图片点击区域

真正容易被忽略的是：图片加载完成前，父容器高度为零，absolute 元素的定位基准就不存在——这比写错 top 值更难排查。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~