bottom: 0 不生效的三大原因：父容器未设 position: relative 导致定位参考错乱；父容器高度为 0 或塌陷使底边无处可锚；padding-bottom 或 box-sizing 影响 content box 定位基准。
bottom: 0 不生效，先看父容器有没有 position: relative
bottom: 0 只对 position: absolute 元素生效，且必须有「已定位的祖先」作为参考系。如果父容器是默认的 position: static，浏览器会一路往上找，直到 html 根元素——这时 bottom: 0 就锚定在视口底部，而不是你想要的容器底边。
常见错误：div 加了 position: absolute; bottom: 0;，但父级没写 position: relative，结果按钮飘到整个页面最下方。
- 必须在你期望的“容器”上显式加
position: relative（哪怕它原本没样式需求） - 别依赖中间某层“碰巧”带
relative—— 定位流会跳过static父级，但若祖父节点有relative，子元素就真会锚定到那儿，造成错位 - 用 DevTools 检查目标元素的 computed
position和其祖先的position值，确认最近非-static 祖先是哪一层
父容器高度为 0，bottom: 0 就没地方可贴
即使加了 position: relative，如果父容器自身高度是 0（比如内部全是浮动、绝对定位或空内容），那么它的「底边」实际就在顶部，bottom: 0 自然看起来无效。
典型表现：卡片内放一个 position: absolute; bottom: 0; 的按钮，但按钮和标题叠在一起，或者完全看不见。
立即学习“前端免费学习笔记（深入）”；
- 临时加
height: 200px测试——如果按钮立刻归位，说明就是父容器没撑开 -
min-height: 100vh不等于「一定有高度」：若父容器的父级没设min-height: 100vh或height: 100%，它的100vh仍可能计算为0 - 更可靠的做法：给父容器设
display: flex; flex-direction: column;，再让内容区flex: 1，避免依赖 height 计算
父容器有 padding-bottom，bottom: 0 对齐的是 content box 底边
bottom: 0 对齐的是父容器的 content box 底边，不是整个盒模型的最底部。如果父容器有 padding-bottom: 20px，那子元素底边离父容器可视底边就有 20px 空隙。
这不是 bug，是 CSS 盒模型的正常行为。改 bottom: 20px 看似能补上，但响应式缩放或字体调整时容易错位。
- 用 DevTools 查父容器的 computed
padding-bottom，一眼就能定位问题 - 保持
bottom: 0，加transform: translateY(20px)（值等于父容器padding-bottom）更稳定 - 如果父容器还带
border，注意box-sizing: border-box会让 content box 更小，间接压缩定位空间——优先排查padding和border，而非子元素的box-sizing
内容区塌陷导致视觉上 footer “悬空”
即使父容器高度正确，中间内容区（如 .content）若塌陷，也会让 footer 看起来浮在半空——不是定位失效，而是它上面那块区域根本没占位。
常见原因：内部用了 float: left 但没清除；display: inline-block 引发基线间隙；visibility: hidden 或 height: 0 却仍占文档流。
- DevTools 里检查
.content的offsetHeight：如果是0，基本就是塌陷 - 给
.content加overflow: hidden或display: flow-root快速清除浮动 - 避免用
margin-top或transform: translateY()错位内容——这些会让渲染位置和文档流脱节，父容器无法感知真实高度
bottom: 0 写得不对，而是它依赖的三层结构——父容器的定位上下文、父容器的实际高度、内容区是否真实撑开——其中任意一层交了白卷，都会让这个看似简单的声明彻底失效。 
