position: absolute 替代 fixed 是最可控解法，因其锚定在 relative 父容器而非不可靠视口；需满足三条件：根容器设 position: relative + min-height: 100vh、底部元素加 width: 100%、监听 focusin/blur 动态计算 bottom 值。
直接用 position: absolute 替代 position: fixed 是目前最可控、兼容性最好的落地解法，但必须配合父容器约束和动态 bottom 计算——否则只是把问题从“飘起来”变成“错位或消失”。
为什么 position: fixed 在键盘弹出时必然失效
position: fixed 锚定在「视觉视口（visual viewport）」底部，而软键盘弹出时，iOS 和多数安卓 WebView 并不触发真正的视口重绘：window.innerHeight 可能延迟更新甚至不变，visualViewport.height 才是真实可视高度。但 fixed 元素仍按旧值计算位置，结果就是按钮“浮”在键盘上方空白处，bottom: 0 或 100vh 完全无效。
用 position: absolute 模拟 fixed 的三个硬性条件
只写 position: absolute; bottom: 0 会穿帮。真正起效需同时满足：
- 根容器必须设
position: relative且有明确高度：推荐min-height: 100vh（不能只写height: 100%，否则滚动或键盘弹出时易塌陷） - 底部元素必须加
width: 100%，否则横屏或缩放后可能错位 - 必须监听
focusin/blur，动态重算bottom值，不能依赖初始值
focusin 后如何安全计算 bottom 值
不能在 focusin 回调里立刻读取 input.getBoundingClientRect().bottom，因为此时键盘尚未完全展开，坐标仍是弹出前的旧值；也不能用 offsetTop，它在 relative 容器下不可靠。
- 在
focusin回调里加setTimeout(() => { }, 0)，确保浏览器完成布局更新后再取坐标 - 用
window.innerHeight - inputRect.bottom计算 bottom 偏移，不是inputRect.top，也不是写死数值 - 多个输入框共用同一底部栏时，需用全局变量记录当前
document.activeElement，避免重复切换或漏恢复 -
blur后必须立刻恢复position: fixed和bottom: 0，否则滚动时元素会消失或错位
容易被忽略的兼容细节
这个方案在安卓低端机或微信内置 WebView 中仍可能抖动，常见原因包括：
- 父容器用了
transform（如translateZ(0)），会创建新层叠上下文，干扰absolute定位参考系 -
body或html被设了height: 100%，导致父容器实际高度塌陷，absolute失去锚点 - iOS Safari 对
window.scrollTo(0, 0)有节流策略，直接调用可能无效，得配合setTimeout或requestAnimationFrame
真正麻烦的不是怎么写 CSS，而是怎么让 JS 在不同机型、不同 WebView 中拿到稳定、及时的视口数据——键盘弹出时机、DOM 更新节奏、重排触发点，三者稍有错位，bottom 值就偏了几十像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
