图像贴底需确保父容器有定位上下文或使用现代布局：用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，但它只对行内元素（或表格单元格）的**基线对齐**起作用，不能让图像“停在父容器底部”。这个属性常被误用于解决贴底问题，实际毫无效果。
使用场景：仅当图像在一行文本中，想让它和文字底边对齐时才用；单独一个图像想贴父容器底边，这条路走不通。
-
vertical-align对display: block的图像完全无效 - 即使图像保持默认
inline，vertical-align: bottom也只是对齐到行框底边，不是父容器底边 - 若强行用
line-height+vertical-align模拟，逻辑脆弱、响应式下极易错位
Flexbox 贴底更简洁可靠，推荐用于现代布局
父容器设 display: flex + flex-direction: column，再用 margin-top: auto 推图像到底部，语义清晰、无需绝对定位、天然支持居中对齐。
性能与兼容性：Chrome/Firefox/Safari/Edge 全支持，iOS Safari 9+ 也 OK；IE10+ 需加 -ms- 前缀（如需兼容 IE，得额外处理）。
- 父容器：加
display: flex和flex-direction: column - 图像本身：加
margin-top: auto（自动撑开上方空白） - 若要水平居中贴底，再加
align-self: center - 注意：不要同时给图像设
height和margin-top: auto冲突，优先级没问题，但视觉上可能意外压缩
用 grid 实现单图贴底最直观
父容器设 display: grid，图像作为唯一子项，用 justify-self: center + align-self: end 即可精准停在底边中央——不需要额外包裹、不干扰文档流、代码最少。
容易踩的坑：Grid 是二维布局，如果父容器里还有其他元素，没明确轨道定义（grid-template-rows 等），行为可能不符合直觉；单图场景下它是最干净的解法。
- 父容器只需
display: grid - 图像加
align-self: end（垂直贴底），justify-self: center（水平居中） - 不依赖父容器高度是否固定，也不需要
position层级干预 - 兼容性比 Flexbox 略低一点（IE 完全不支持），但所有现代浏览器都稳
贴底看似简单，真正落地时最容易忽略的是**父容器的定位上下文或布局模式是否就绪**——不是图像属性设错了，而是它根本没“锚点”可贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
