不能用 position: fixed 实现输入框上方悬浮，应采用 position: absolute + 动态 bottom 计算：父容器设 relative 且 min-height: 100vh，focus 时 setTimeout 获取 input.getBoundingClientRect().bottom 并设置 container.style.bottom，blur 时恢复为 0。
不能靠 position: fixed 直接“固定在输入框上方”——这是个伪需求，浏览器不支持这种相对软键盘的动态锚定。 真实可行的方案是：把悬浮条做成 position: absolute，父容器设为 position: relative 且撑满视口，再用 JS 在 focus 时动态计算并设置 bottom 值，使其“看起来”始终浮在输入框上方。
为什么 position: fixed 在键盘弹出时会漂移
iOS 和多数 Android WebView（包括微信 X5 内核）在软键盘弹出时，并不会真正更新 window.visualViewport.height 或重绘视口坐标系。position: fixed 元素锚定的是“逻辑视口”，而键盘只是压缩了可用高度，fixed 元素仍按旧尺寸定位，结果就是悬浮条卡在键盘上方、甚至被顶出屏幕外。
- Android 老 WebView 不支持
visualViewportAPI，window.innerHeight在focus触发时往往延迟几十毫秒或完全不变 - iOS Safari 中
scrollIntoView对fixed元素无效，无法靠滚动修正位置 - 写死
bottom: 56px在横屏、缩放、地址栏收放时全部失效
用 position: absolute + 动态 bottom 计算才是正解
核心是放弃“固定在视口”，转为“固定在父容器底部”，再让父容器随输入框位置实时调整。关键步骤：
- 悬浮条外层容器必须设
position: relative且min-height: 100vh（不是height: 100%，否则键盘弹出会塌） - 悬浮条本身用
position: absolute; bottom: 0; width: 100%，确保横屏不偏移 - 在
input.addEventListener('focus', ...)回调里，用setTimeout(() => { ... }, 0)等 DOM 重排完成，再调用input.getBoundingClientRect().bottom - 将该
bottom值赋给悬浮条容器的style.bottom，例如：container.style.bottom = (window.innerHeight - rect.bottom) + 'px' -
blur后立刻恢复container.style.bottom = '0'，否则滚动时元素消失
常见坑点和绕过方式
直接读 getBoundingClientRect() 容易失真，尤其当页面有 overflow: hidden、嵌套 position: relative 或任意 transform 的祖先元素时：
立即学习“前端免费学习笔记（深入）”；
- 不要用
offsetTop或scrollTop + input.offsetTop—— transform 会让它错位几十像素 - 避免在
touchstart或click里提前计算位置，焦点还没真正获得，getBoundingClientRect()返回的是初始位置 - 微信 X5 内核不支持
behavior: 'smooth'，调用scrollIntoView时必须去掉该参数 - 如果悬浮条内含
input或textarea，iOS Safari 会二次触发键盘错位，务必禁止嵌套
最麻烦的其实是“多个输入框共存”场景：每个 focus 都要重新计算，blur 时机又难精确捕获。建议加一个防抖锁（如 isAdjusting = true），并在 focusin 后统一处理，比监听一堆 focus 更稳。真正上线前，务必在 iOS 真机、微信、QQ、安卓 Chrome 上逐个测 keyboard 弹出/收起全过程——视觉上“浮在上方”这事，差 2px 就露馅。
