position: absolute 是最可控解法，但需同步约束容器、监听焦点、动态切换定位状态；因浏览器将 fixed 锚定在视觉视口底部，软键盘弹出时导致错位，且 100vh 等静态值无法响应动态变化。
直接换 position: absolute 是目前最可控、兼容性最好的解法，但只改一个样式声明必穿帮——必须同步约束容器、监听焦点、动态切换定位状态。
为什么 position: fixed 在键盘弹出时一定错位
不是你 CSS 写错了，而是浏览器把 fixed 锚定在「视觉视口（visual viewport）」底部，而软键盘弹出时：iOS 会冻结 layout viewport 高度并上推页面，Android 常压缩 window.innerHeight 却不触发重排。结果就是按钮飘在键盘上方、被顶出屏幕，甚至卡在半空。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 样式
最容易被忽略的是：所有计算前先确认 document.activeElement === inputEl，防止异步焦点转移导致状态错位；若页面用了 transform、overflow: hidden 或 fixed 父容器，getBoundingClientRect() 可能返回错误坐标，且无报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
