应弃用绝对定位，改用flex-direction: column配合margin-top: auto实现按钮居底；需确保.card设display: flex、flex-direction: column、min-height，且按钮为直接子元素，否则无法正确吸底。
绝对定位和 flex 配合用在卡片按钮居底上，容易出问题——不是按钮悬空，就是响应式错位，或者破坏卡片等高逻辑。真正稳妥的做法是：只用 flex，别碰 position: absolute；真要用绝对定位，必须严格限定作用域且不干扰主布局。
为什么 position: absolute 在卡片里风险高
卡片内按钮加 position: absolute; bottom: 0; 看似简单，但实际会：
- 脱离文档流，不再参与父容器高度计算 → 卡片实际高度可能塌缩，尤其内容少时
- 父容器没设
position: relative，按钮会相对于最近定位祖先或视口偏移 - 多卡片网格中，各卡片高度不一致 → 绝对定位的“底部”视觉位置根本不对齐
- 移动端横竖屏切换、字体缩放时，
bottom: 0容易和 padding / border 冲突，出现遮挡或留白异常
margin-top: auto 是更安全的居底方式
前提是卡片容器已启用垂直 flex 布局。关键点不在按钮本身，而在父级结构是否满足 flex 分配条件：
-
.card必须设display: flex; flex-direction: column; -
.card要有明确高度参考：用min-height（推荐）或height，不能全靠内容撑开 - 按钮直接作为
.card的子元素（或包裹它的容器是 flex item），才能响应margin-top: auto - 避免给按钮设
height、max-height或flex-shrink: 0，否则会阻断空间吸收
示例结构：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<div class="card"> <h3 class="card-title">标题</h3> <p class="card-text">描述文字...</p> <button class="card-btn">操作</button> </div>
CSS：
.card {
display: flex;
flex-direction: column;
min-height: 280px; /* 关键：提供高度基准 */
}
.card-btn {
margin-top: auto; /* 吸收上方所有剩余空间 */
}
真要用绝对定位，只限局部装饰性按钮
比如右上角关闭图标、状态标签这类不参与卡片主体高度计算的元素。此时必须：
- 把绝对定位元素包进一个
position: relative的 wrapper（如.card-header），而不是整个.card - 绝对定位元素的尺寸要小、固定，且不影响其他 flex item 的排布
- 绝不让绝对定位按钮成为
.card的直接子项来承担“底部锚点”功能 - 测试不同屏幕宽度下是否溢出或重叠，尤其是 iOS Safari 对
position: absolute的渲染差异
复杂点在于：卡片是否等高、内容是否动态、是否需支持 IE10/11 —— 这些都会影响 flex: 1 和 margin-top: auto 的行为边界。别为了省几行 CSS 去赌兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
