position: absolute 是目前最可控、兼容性最好的解法，因其锚定在可控的 relative 祖先容器而非不可靠的视觉视口，但必须同步满足三个硬条件：根容器设 position: relative 和 min-height: 100vh，底部元素加 width: 100%，并监听 focusin/blur 动态计算 bottom 值（用 settimeout 延迟读取 getboundingclientrect() 后以 window.innerheight - inputrect.bottom 计算），blur 后需清除内联样式并恢复 fixed 定位。
直接换 position: absolute 是目前最可控、兼容性最好的解法，但必须同步约束容器、监听 focusin/blur 并动态调整定位状态——只改一个属性必穿帮。
为什么 position: fixed 在键盘弹出时一定会错位
不是你 CSS 写错了，而是浏览器把 position: fixed 锚定在「视觉视口（visual viewport）」底部，而软键盘弹出时，这个视口高度被压缩（Android）或冻结上推（iOS），fixed 元素却不会重算位置。结果就是按钮飘在键盘上方、卡在半空，甚至被顶出屏幕。用 100vh、bottom: 0 或 @media 都无效，因为这些值不随键盘动态更新。
用 position: absolute 替代的三个硬条件
只写 position: absolute; bottom: 0 会同样错位，关键在于祖先容器是否“稳”：
- 根容器（如
#app或body）必须设position: relative和min-height: 100vh（不能只写height: 100%，否则滚动或键盘弹出时塌陷） - 底部区域要加
width: 100%，否则横屏或缩放后可能偏移 - 必须监听
focusin和blur，不能依赖resize—— iOS 上resize触发率低于 20%，安卓延迟严重，且无法捕获键盘弹起瞬间
监听 focusin 后如何安全计算 bottom 值
不能直接读 input.getBoundingClientRect().bottom，因为 focusin 触发时键盘还没完全展开，坐标仍是旧值；也不能用 offsetTop，它在 relative 容器下不可靠：
- 在
focusin回调里加setTimeout(() => { ... }, 0)，确保 DOM 重排完成后再取坐标 - 用
window.innerHeight - inputRect.bottom计算bottom偏移，而非写死数值 - 多个输入框共用同一底部栏？得用全局变量记录
document.activeElement，避免重复切换或漏恢复 -
blur后立刻恢复position: fixed和原始bottom: 0，并调用el.style.removeProperty('top')和el.style.removeProperty('bottom')清除残留 inline 样式
为什么 flex 布局不能单独解决问题
display: flex 本身不修复 fixed 错位，它只是布局工具。所谓“用 flex 就行”，其实是用了 position: relative; height: 100vh; display: flex; flex-direction: column 的父容器 + margin-top: auto 把底部元素“推”到底部——但这要求父容器高度稳定、内容区可独立滚动。一旦 100vh 在键盘弹出时失真（iOS 就常这样），整个结构就跳动。真正起效的，永远是容器约束 + 键盘状态监听的组合，不是某个 CSS 属性本身。
最容易被忽略的是：iOS 键盘收起后 window.innerHeight 不立即恢复，Safari 对 window.scrollTo() 有节流策略，且 transform 或 overflow: hidden 父级会让 getBoundingClientRect() 返回错误坐标——这些细节不处理，再“标准”的方案也会在真机上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
