根本原因是position: absolute的定位参考点为最近非static祖先，若父容器未设position: relative，文字将锚定到body或视口底部；必须显式给共用父容器设置position: relative。
为什么文字总飘到页面底部而不是图片底下
根本原因是 position: absolute 的定位参考点，不是图片本身，而是最近一个 position 不为 static 的祖先元素。默认所有元素都是 position: static，所以如果你只给文字加了 bottom: 0 和 position: absolute，但包裹它的容器没设 position: relative，浏览器就会一路往上找——直到 或视口，文字就“飞”到整个页面最底端了。
必须确保图片和文字共用一个父容器，且该容器显式声明：position: relative。
- 别把文字塞进
<div> 然后单独定位，而忘了给这个 <code><div> 加 <code>position: relative - 别用
<figure></figure>却在外部再套一层未定位的<div>，那层外层才是“最近非 static 祖先” <li>如果用了 Bootstrap 的 <code>.carousel-item，它默认没有定位属性，仍需手动加position: relative - 把
<figcaption></figcaption>放在<figure></figure>中间或多个位置——它只能是第一个或最后一个子元素 - 期望它自动右对齐或浮动到图片右侧——默认不支持，必须额外加
display: flex或text-align: right - 在旧项目里强行降级适配 IE10 以下——现代项目可直接用，无须 polyfill
- 容器设
position: relative，图片和文字同级嵌套其中 - 文字设
position: absolute; top: 32%; left: 50%（数值按设计稿比例换算） - 立刻接
transform: translate(-50%, -50%)，否则文字左上角会落在目标点，不是中心对齐 - 图片必须用
max-width: 100%; height: auto或object-fit: contain，否则缩放后坐标失效
用 <figure></figure> + <figcaption></figcaption> 最省心但要注意兼容场景
<figure></figure> 是 HTML5 原生语义化方案，<figcaption></figcaption> 默认块级、居中、位于图片下方，无需写 CSS 就能工作。但它只适合“图片在上、说明在下”的垂直流布局。
常见误用：
响应式时，<figcaption></figcaption> 会随 <figure></figure> 宽度缩放，但字体大小不会自动变小，如需文字也缩放，得配合 clamp() 或媒体查询重设 font-size。
position: absolute + transform 实现精准锚定与缩放跟随
当你要把文字精确压在 mockup 图片的某个按钮区域、或保持相对位置随图缩放（比如“立即下载”始终盖在图中手机屏幕正中），就得放弃 bottom: 0 这类固定偏移，改用百分比坐标 + transform: translate(-50%, -50%)。
关键操作：
注意：不要给文字设固定 px 字号，否则小屏下文字会撑破图片区域；推荐用 rem 或 clamp(0.875rem, 4vw, 1.125rem)。
遮罩+文字叠加时，linear-gradient 必须写在 url() 前面
想让底部文字更清晰，常会给图片加一层渐变遮罩。但直接写 background: rgba(0,0,0,0.6), url(img.jpg) 是无效的——rgba() 不是图像类型，浏览器会忽略它。
正确写法必须用 linear-gradient 构造一个图像层：
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url('photo.jpg');
还要分开控制两层尺寸：
-
background-size: 100% 100%, cover—— 渐变铺满容器，图片等比缩放 -
background-position: top, center—— 渐变锚点在顶部，图片锚点在中心 - 两个
rgba()的 alpha 值不能混用，比如rgba(0,0,0,0)和rgba(0,0,0,0.7)是安全的；避免用transparent，某些 Safari 版本会转成全黑
这层遮罩本质是“视觉辅助”，不是布局工具。文字定位仍要靠外层容器的 position: relative 和内部 absolute 配合，两者职责不能混淆。
