position: fixed 错位是因锚定视觉视口且不重算位置；resize 事件不可靠，应改用 focusin/blur 监听；absolute 同样错位需设根容器 relative+min-height；env(keyboard-inset-bottom) 仅 iOS 16.4+ 支持，须降级；visualViewport API 最精准但有兼容限制。
不是你 CSS 写错了，position: fixed 在软键盘弹出时错位是浏览器底层行为——它被锚定在「视觉视口（visual viewport）」底部，而键盘弹出会压缩或上推这个视口，但 fixed 元素不重算位置，结果就是按钮飘在半空、卡在键盘上方，甚至被顶出屏幕。
为什么 resize 事件完全不可靠
监听 window.addEventListener('resize') 在 iOS Safari（尤其是 15.4+）中触发率低于 20%，安卓各 WebView 行为分裂：Chrome 常延迟 300ms 才触发，微信内嵌 WebView 中多数根本不触发。更致命的是，它通常只在键盘收起时发一次，完全漏掉弹出瞬间。用户点进 input 的那一刻，错位已经发生。
- 必须改用
focusin（注意不是focus）和blur作为唯一可靠入口 - 监听对象必须覆盖
input、textarea和[contenteditable]，漏掉任意一类都会失效 -
focusin回调里要立刻校验document.activeElement === inputEl，防止异步焦点转移导致状态错位
为什么直接换 position: absolute 仍会错位
只把 position: fixed 改成 position: absolute 并设 bottom: 0，照样飘。因为 absolute 的定位基准是最近的 position: relative 祖先容器——如果这个容器本身高度塌陷或不可控，元素照样失位。
- 根容器（如
#app或body）必须设position: relative和min-height: 100vh（不能只写height: 100%，否则键盘弹出时塌陷） - 底部元素必须加
width: 100%，否则横屏或缩放后偏移 - 必须监听
focusin/blur动态切换定位状态，不能靠纯 CSS 静态声明
env(keyboard-inset-bottom) 能用但别全信
bottom: env(keyboard-inset-bottom, 0px) 是 iOS Safari 16.4+ 原生支持的最优解，键盘弹出自动上浮，收起回退。但它不是跨平台方案：
立即学习“前端免费学习笔记（深入）”；
- 安卓 WebView 完全不支持；iOS 15.3 及更早版本也不识别
- 必须搭配
@supports (bottom: env(keyboard-inset-bottom))降级，否则整条规则被忽略 - 必须写 fallback：
bottom: env(keyboard-inset-bottom, 0px)，不能只写env(keyboard-inset-bottom)，否则键盘收起后按钮悬空 - 必须在
<meta>中启用：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
visualViewport API 是目前最准的 JS 方案
visualViewport.height 直接反映用户当前真正看到的高度，比抖动的 resize 或不可靠的 window.innerHeight 精准得多。但它有兼容边界：
- iOS Safari 15.4+、Chrome 61+ 支持；老版本需降级到
focusin+setTimeout(() => {}, 0)延迟读取getBoundingClientRect() - 计算 bottom 偏移要用
window.innerHeight - inputRect.bottom，不是写死数值 -
blur后必须立刻清除内联样式：el.style.removeProperty('top')和el.style.removeProperty('bottom')，再恢复position: fixed，否则滚动时元素直接消失
真正容易被忽略的点是：iOS 键盘收起后 window.innerHeight 不立即恢复，可能延迟几百毫秒；focusin 触发时机早于键盘完全展开，此时读取坐标仍是旧值；还有 Safari 对 window.scrollTo(0, 0) 有节流策略，得配合 setTimeout 或 requestAnimationFrame 才生效。
