position: fixed 最快但需配 bottom: 0、left: 0、width: 100% 和 z-index，否则 ios safari 易偏移或被遮挡；键盘弹出需 js 监听 visualviewport.resize 动态设 bottom；容器内吸底应改用 position: absolute + relative 父容器。
直接用 position: fixed 最快，但必须配 bottom: 0、left: 0、width: 100% 和 z-index，否则在 iOS Safari 或小屏上大概率偏移或被遮挡。
为什么 position: fixed 常见失效？
不是 fixed 不行，是漏了关键约束：
-
left: 0缺失 → Safari 下按钮可能右偏（尤其缩放后） - 没设
width: 100%→ 按钮只占内容宽度，左右留白 -
z-index太低 → 被弹窗、下拉菜单、position: absolute元素盖住 - 没处理
env(safe-area-inset-bottom)→ iPhone X 及之后机型底部圆角/指示条会遮挡按钮
移动端键盘弹出时按钮被顶出视口怎么办？
不能只靠 CSS。iOS/Android 键盘会压缩 visualViewport.height，需 JS 动态调整 bottom 值：
if ('visualViewport' in window) {
const btn = document.querySelector('.fixed-bottom-btn');
const updateBottom = () => {
const offset = window.innerHeight - visualViewport.height;
btn.style.bottom = offset + 'px';
};
visualViewport.addEventListener('resize', updateBottom);
}
注意：offset 是键盘实际遮挡高度，直接赋给 bottom 就能让按钮“浮”在键盘上方；别用 scrollY 或 pageYOffset，它们不反映键盘状态。
想固定在容器内（比如卡片底部），而不是整个页面？
改用 position: absolute，但前提是父容器必须有 position: relative：
- 父元素加
position: relative，并预留底部空间（如padding-bottom: 60px） - 按钮加
position: absolute、bottom: 0、left: 0、right: 0 - 避免用
margin-top: auto或flex: 1撑高——卡片内容高度不一致时，按钮位置会漂移
如果卡片高度不固定，又要求按钮视觉统一到底部，display: flex + justify-content: space-between 更稳，但那是语义归属表单末尾的方案，不是真“固定”。
真正难的不是写那几行 CSS，而是判断这个按钮要不要脱离文档流：要随滚动隐藏、要避开键盘、要跨路由复用 → 选 fixed；要和表单语义绑定、要支持无障碍阅读、要避免被键盘顶出 → 得换 Flexbox 吸底方案。两者不能混用，选错一个，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
