图像贴底需确保父容器有定位上下文或使用现代布局：用position: absolute+bottom: 0时父容器须设position: relative；vertical-align: bottom无效；推荐Flexbox（margin-top: auto）或Grid（align-self: end）。
图像贴底边用 position: absolute 配合 bottom: 0
直接给图像加 position: absolute 并设 bottom: 0，前提是其父容器有定位上下文（即 position 值为 relative、absolute 或 fixed）。否则 bottom: 0 会相对于整个视口定位，不是你想要的“贴父容器底边”。
常见错误现象：bottom: 0 没生效、图片跑到页面最下方、和其他元素重叠。
- 父容器必须设置
position: relative（最常用且安全） - 图像本身需设
position: absolute，且不依赖文档流，所以要手动控制left/right对齐方式 - 若父容器高度不定，贴底仍有效；但若父容器无高度（比如子元素全浮动/绝对定位），它会塌陷，导致贴底失效
vertical-align: bottom 不适用于块级图像贴底
很多人试过给 加 vertical-align: bottom，但它只对行内元素（或表格单元格）的**基线对齐**起作用，不能让图像“停在父容器底部”。这个属性常被误用于解决贴底问题，实际毫无效果。
使用场景：仅当图像在一行文本中，想让它和文字底边对齐时才用；单独一个图像想贴父容器底边，这条路走不通。
立即学习“前端免费学习笔记（深入）”；
