卡片内悬浮按钮贴不到底部，90%是因为父容器未设 position: relative；必须为按钮的直接定位祖先（如 .card 或 .card-body）设置该属性，否则 absolute 元素将相对于 body 定位。
卡片内悬浮按钮贴不到底部，90%是因为父容器没设 position: relative。 这不是可选项，是绝对定位生效的前提条件。
为什么 bottom: 0 没反应？检查定位上下文是否建立
给按钮加 position: absolute; bottom: 0; 后它掉到页面最底下，说明它正在相对于 body 定位——因为它的所有父级（包括 .card）都是 position: static（默认值），不构成定位上下文。
- 必须给按钮的**直接定位祖先**设
position: relative；通常是.card，但如果按钮放在.card-body内，就得给那个.card-body加 - 别用
position: inherit或只在子元素上写absolute而漏掉父级relative，这是最常被跳过的一步 - 若卡片用了
overflow: hidden且按钮超出内容区，它会被裁掉——absolute元素仍受父容器overflow约束
bottom: 0 对齐了但视觉上浮空？处理 padding 和 box-sizing
按钮设了 bottom: 0 却悬在卡片底部空白上方，大概率是父容器（如 .card-body）有 padding-bottom，而 absolute 是按 content box 定位的。
- 把按钮挂到
.card的直接子级（比如紧贴.card-body下方），避免嵌套过深导致参考错乱 - 按钮加
width: 100%; box-sizing: border-box;，防止因padding导致宽度溢出或错位 - 需要留白时，用
bottom: 1rem，别依赖margin-bottom（对absolute元素无效）
响应式下按钮错位或被截断？优先用 Flexbox 替代 Absolute
纯 absolute 在内容高度变化、小屏缩放或媒体查询改了 padding 时容易失守——按钮位置僵硬，无法自适应。
- 给
.card加display: flex; flex-direction: column;，再让按钮用margin-top: auto; - Bootstrap 5 可直接用
.d-flex.flex-column.mt-auto，一行解决，无需额外 CSS - 这个方案天然支持高度自适应、折叠动画、响应式
padding，且不脱离文档流 - 若必须保留
absolute（比如要盖住图片），记得加z-index: 1，否则可能被标题或图片遮住
真正卡住多数人的，从来不是怎么写 bottom: 0，而是忘了给 .card 加那行 position: relative。一旦漏掉，后面所有偏移、z-index、box-sizing 都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
