图片卡片底部文字对不齐，根本原因是bottom作用于相对定位元素自身原始位置而非父容器底边；必须给文字容器设position: relative，配合bottom: 0与transform: translatey(100%)或改用flex布局（margin-top: auto）才能稳定贴底。
图片卡片底部文字为什么总对不齐
用 position: relative + bottom 拉文字到图片底部，看似简单，但实际常出现文字“悬空”或“压边”——根本原因是 bottom 作用于相对定位元素自身，不是相对于父容器底边，而是基于它原本的文档流位置向下偏移。一旦图片高度变化、文字行数不同，bottom 值就得反复调，没法复用。
用 position: relative 给谁加才对
必须给**包裹文字的容器**（比如 <div> 或 <code><p></p>）设 position: relative，而不是给图片加。图片保持默认 static 即可。这样文字容器才能通过 bottom 向下“退让”，腾出空间让自身底部贴住父容器底边。
常见错误写法：
@@##@@
这会让图片自己上浮，文字还在原位，根本没形成“卡片”感。
正确结构示意：
<div class="card"> <br> @@##@@<br><div class="caption" style="position: relative; bottom: 0">这是描述</div> <br> </div>
bottom 值怎么选才稳定
纯数值（如 bottom: 12px）只在固定字号+单行时可靠。真实场景中更推荐：
- 用
bottom: 0+transform: translateY(100%)：把文字容器底边精准锚定到父容器底边，再整体上提一行高 - 或直接改用
position: absolute（父容器需position: relative），更可控 - 若坚持用
bottom，优先配合line-height和padding-bottom调整，避免硬编码像素值
例如：
.caption {<br> position: relative;<br> bottom: 0;<br> line-height: 1.4;<br> padding-bottom: 0.4em;<br>}
移动端适配时 bottom 会失效吗
不会失效，但容易被忽略两点：
- 图片用
width: 100%时，高度变成不定值，bottom的参照位置仍按文字原始位置算，视觉错位更明显 - 小屏下字体缩放可能触发浏览器重排，导致
bottom偏差放大 - 建议搭配
min-height或aspect-ratio锁定图片容器比例，让文字有稳定锚点
极简方案就是放弃 bottom，改用 Flex 布局：
.card { display: flex; flex-direction: column; }<br>.card img { flex-shrink: 0; }<br>.caption { margin-top: auto; }
反而更干净，兼容性也更好。
真正难的不是写那几行 CSS，是想清楚文字到底要“贴着谁的底”。bottom 很容易让人误以为在控制“离父容器底边距离”，其实它只管自己往下挪了多少——这个认知偏差，比语法本身更容易卡住人。
