按钮始终停在容器底边，最直接前提是父容器设position: relative，按钮设position: absolute + bottom: 0；若父容器有padding则需用calc()调整bottom值，或改用display: flex + flex-direction: column + justify-content: flex-end更稳健。
按钮始终停在容器底边，用 position: absolute 最直接
前提是容器本身得是 position: relative 或 position: absolute，否则 absolute 会往上找最近的定位祖先，甚至跑到 body 底部去。
常见错误是只给按钮加 position: absolute 和 bottom: 0，但忘了给父容器设定位上下文。结果按钮飘到整个页面底部，而不是它“该在的那个容器”里。
- 父容器加
position: relative（最常用，不影响布局流） - 按钮加
position: absolute+bottom: 0+left: 0（或right: 0，按对齐需求） - 如果父容器有内边距（
padding），按钮会贴着内边距边缘，不是容器可视区底边——需要额外用calc()或调整bottom值
Flexbox 方案更稳健，尤其要居中或响应式时
用 display: flex + flex-direction: column + justify-content: flex-end，按钮自然沉到底部，且不脱离文档流，不会遮挡其他内容，也不依赖父容器是否定位。
比 absolute 更少意外，特别是父容器高度动态变化（比如内容增减、折叠展开）时，Flexbox 自动重排，absolute 容易错位或重叠。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器设
display: flex、flex-direction: column - 加
justify-content: flex-end让子项垂直靠底 - 如果按钮要水平居中，再加
align-items: center；要右对齐，用align-items: flex-end - 注意：若父容器没设高度（比如高度由内容撑开），
flex-end效果可能不明显——此时可加min-height: 100vh或具体高度值
position: sticky 不适合“固定在容器底”，别误用
sticky 是相对视口的粘性定位，触发条件是滚动到某位置才生效，不是“固定在父容器底部”。把它用在按钮上，通常只会让按钮在滚动到顶部时卡住，和“容器底固定”完全无关。
有人试过写 bottom: 0 + position: sticky，但浏览器忽略 bottom，只认 top；就算强行设 top: auto; bottom: 0，行为不可靠，不同浏览器表现不一致，属于非标准用法。
-
sticky只支持top和left作为锚点，bottom和right在规范里不被保证 - 它的作用域是“滚动时相对视口吸附”，不是“相对于父容器定位”
- 真要容器底固定，老实用
absolute或flex
兼容性与边界情况必须检查
IE11 对 Flexbox 的 flex-direction: column + justify-content: flex-end 支持基本没问题，但某些嵌套场景下会错位；absolute 方案在所有浏览器都稳，但要注意父容器是否溢出隐藏（overflow: hidden）导致按钮被裁掉。
- 如果父容器有
overflow: hidden，absolute按钮超出部分会被剪掉——要么去掉overflow，要么改用 Flexbox - 移动端 Safari 对
min-height: 100vh有时计算不准（取的是视口初始高度），滚动后可能留白；建议用height: 100dvh（现代支持）或 JS 动态设高 - 按钮本身如果有
margin，在absolute下会失效，要用top/bottom等偏移控制间距；Flexbox 下margin依然有效
实际选哪种，看父容器是否高度可控、要不要响应式对齐、有没有滚动裁剪风险——没有银弹，但 Flexbox 多数时候更省心，absolute 适合明确尺寸且不希望影响布局流的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
