必须给图片容器加 position: relative，否则文字会相对于整个页面定位而非图片底部；因为 absolute 元素的定位参考点是最近的非 static 祖先，而默认 static 不构成定位上下文。
必须给图片容器加 position: relative，否则文字会相对于整个页面定位，而不是贴在图片底下。
为什么文字没出现在图片底部？
常见错误是只给文字元素设 position: absolute 和 bottom: 0，但忘了它的父容器（即包裹图片和文字的 <div>）必须是已定位上下文。如果父容器没设 position: relative，浏览器就会往上找——直到 <html> 或视口，导致文字飘到页面最底端。
关键点：
-
position: absolute元素的定位参考点，永远是最近的position值不为static的祖先 - 没显式设置时，所有元素默认
position: static，不构成定位上下文 - 仅靠
margin、text-align或flex无法实现“覆盖式底部锚定”，它们属于文档流内布局
如何写一个可靠的文字底部覆盖结构
HTML 结构要干净：图片和文字同级，共用一个带 relative 的父容器。
立即学习“前端免费学习笔记（深入）”；
示例 HTML：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div class="img-container"> <img src="photo.jpg" alt="描述"> <p class="caption">这是底部文字</p> </div>
CSS 必须包含：
-
.img-container { position: relative; display: inline-block; }——inline-block防止容器塌陷（尤其图片未加载时） -
.caption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }——width: 100%确保居中生效，left: 0配合text-align才能真正水平居中 - 可选增强：
background: rgba(0,0,0,0.7); color: white; padding: 6px 12px;提升可读性
响应式下容易被忽略的坑
图片缩放后，文字位置可能错乱或被截断，尤其在移动端。
必须同步处理三件事：
- 给图片加
max-width: 100%; height: auto;，确保它随容器缩放 - 给
.img-container显式设宽高，或用aspect-ratio（如aspect-ratio: 4/3），避免图片加载失败时容器高度塌陷 - 文字字体大小建议用
rem或em，避免固定px在小屏上撑出溢出
要不要用伪元素代替 <p>？
可以，但只推荐用于纯装饰性文字（比如水印、角标）。伪元素无法被屏幕阅读器识别，也不支持焦点与交互。
若文字含语义（如图注、版权信息、alt 补充），必须用真实元素（<p>、<figcaption>），且需注意：
-
<figcaption>必须放在<figure>内，不能直接套在任意<div>里 - 若用
<figure>+<figcaption>，仍要给<figure>设position: relative，否则<figcaption>的absolute依然无效
真正难的不是写对那几行 CSS，而是每次加新图时，都记得补上那个 position: relative —— 它不报错，但一漏就全偏。
