用 position: absolute 替代 fixed 可绕过键盘顶起问题，因其锚定相对父容器而非视口，但需满足三条件：父容器设 position: relative 和 min-height: 100vh；底部元素设 width: 100%；JS 动态监听 focusin/blur 并用 setTimeout 精确计算 bottom 值。
直接用 position: absolute 替代 position: fixed 是最可控的兜底手段，但不是无脑替换——它必须配合动态 bottom 值计算，否则在滚动、多输入框、键盘收起后都会错位。
为什么 absolute 能绕过键盘顶起问题
fixed 元素锚定在视口（viewport）上，而软键盘弹出时 iOS 和部分安卓 WebView 会压缩或“假性缩放”视口，导致 fixed 定位依据失真；absolute 则锚定在最近的 position: relative 祖先上，只要父容器高度稳定（比如设为 min-height: 100vh），底部元素就不会被键盘拖走。
- absolute 不依赖视口尺寸变化，只依赖父容器的 layout height
- 它天然支持滚动上下文，不会因键盘弹出而“悬浮”在可视区外
- 比 sticky 更兼容老版本 Android WebView（sticky 在某些低版本中不触发）
absolute 底部栏必须满足的三个条件
只写 position: absolute; bottom: 0 依然会穿帮。关键在于父容器和 JS 协同：
- 父容器必须有
position: relative且明确高度（推荐min-height: 100vh，不能只靠height: 100%） - 底部元素需加
width: 100%，否则在横屏或缩放后可能错位 - 必须监听
focusin和blur，动态重算bottom值，不能只靠初始bottom: 0
focusin 后如何安全计算 bottom 值
不能直接用 input.getBoundingClientRect().bottom，因为键盘弹出后该值可能已失效；也不能用 window.innerHeight - input.offsetTop，因为 offsetTop 在 relative 父容器下不可靠。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 在
focusin回调里用setTimeout(() => { ... }, 0)，等浏览器完成布局更新 - 读取
input.getBoundingClientRect().bottom，再减去父容器getBoundingClientRect().bottom，得到相对父容器的偏移 - 用
footer.style.bottom = <code>${window.innerHeight - rect.bottom}px设置（注意不是rect.top） - blur 后必须恢复为
bottom: 0，且加setTimeout(..., 100)，避免 iOS 键盘收起动画未结束就重置
容易被忽略的兼容细节
这个方案在安卓低端机或微信内置 WebView 中仍可能抖动，原因常是：
- 父容器用了
transform（如translateZ(0)），会创建新层叠上下文，干扰 absolute 定位参考系 - body 或 html 被设了
height: 100%，导致父容器实际高度塌陷，absolute 失去锚点 - 多个输入框共用一个底部栏时，未用 flag 统一管理焦点状态，导致 blur 后误恢复，或 focusin 重复计算
- 未给父容器加
overflow-y: auto，键盘弹出后内容无法滚动到输入框位置
真正稳定的 absolute 方案，从来不是纯 CSS 的事——它只是把定位逻辑从视口挪到了文档流，但依然要靠 JS 把 bottom 值“钉”在正确位置上。漏掉 setTimeout、没处理 blur 延迟、父容器高度没兜底，任何一个都足以让整个方案在真机上失效。
