bottom: 0 只对 position 为 absolute、fixed 或 sticky 的元素生效，且依赖最近已定位祖先（如 position: relative）作为参考系；若无，则锚定视口底部。
bottom: 0 在没有 position: relative 的父容器中完全无效——它只会“掉出”文档流，而不是贴着你想要的容器底边。
为什么 bottom: 0 看似写了却没反应？
因为 bottom 是定位属性，只对 position 为 absolute、fixed 或 sticky 的元素生效；而它的参考系默认是最近的「已定位祖先」（即 position 不为 static 的父级）。如果整个 DOM 链上都没有这样的父容器，它就回退到初始包含块（通常是视口），导致元素锚定在浏览器窗口底部，而非你预期的卡片或弹层底部。
- 常见错误现象：
div设置了position: absolute; bottom: 0;，但位置飘在页面最下方，和父容器高度无关 - 真实场景：模态框内动态内容区 + 固定操作按钮组，按钮需始终停在内容区底部，不管内容多高或是否滚动
- 关键点：不是给子元素加
bottom: 0就完事，必须确保其直接父容器有position: relative（或其他非static值）
relative 容器必须是「直接父级」吗？
必须是最近的已定位祖先，不一定是直接父级，但绝大多数情况下推荐设在直接父级——否则层级跳变容易引发意料外的偏移。
- 如果中间某层是
position: static（默认值），它不会中断定位流，bottom: 0会继续向上找，直到遇到relative/absolute等 - 但若中间有
position: relative的祖父节点，而你本意是让子元素相对于“当前卡片”定位，结果却锚定到更外层的容器，就会错位 - 安全做法：在你明确想作为定位上下文的那个包裹容器上，显式写
position: relative，哪怕它原本没样式需求
高度不确定时，如何避免底部内容被截断或撑开？
仅靠 position: absolute; bottom: 0 不足以应对动态内容——它不参与文档流，父容器可能因内部无高度而塌缩，导致绝对定位元素悬空或重叠。
- 给父容器设置最小高度（如
min-height: 200px）可防塌缩，但无法适配所有内容长度 - 若父容器需自适应高度，又希望底部区域「压住」内容末尾，可用
display: flex; flex-direction: column;+margin-top: auto替代绝对定位（更健壮，无需 relative） - 若必须用
absolute（例如需要脱离文档流避免影响滚动条、或叠加遮罩），请确保父容器有明确的height或min-height，且子内容不依赖父容器高度来布局 - 兼容性提醒：flex 方案在 IE10+ 可用；absolute + relative 组合无兼容问题，但需手动控制层叠顺序（
z-index）
真正容易被忽略的是：relative 容器一旦设置了 padding 或 border，bottom: 0 对齐的是 content box 底边，不是 padding box —— 如果你需要按钮紧贴容器内边距底端，得额外加 bottom: 16px（对应 padding-bottom 值），而不是想当然地写 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
