用absolute模拟fixed能绕过键盘错位，因ios/android对可视视口重绘策略不同导致fixed失效，而absolute依赖relative祖先容器，只要容器高度可控即可规避；通过relative+absolute实现伪fixed需约束容器、同步状态并监听输入事件。
为什么用absolute模拟fixed能绕过键盘错位
软键盘弹出时，position: fixed 元素错位的根本原因不是样式写错了，而是浏览器对「可视视口（visual viewport）」的重绘策略不一致：iOS 会冻结 layout viewport 高度但上推页面，Android 则常压缩 window.innerHeight。而 position: absolute 的定位基准是最近的 position: relative 祖先容器，只要这个容器高度可控、不随键盘滚动异常变化，就能避开系统级定位失效。
如何用relative + absolute实现“伪fixed”底部按钮
关键不在绝对定位本身，而在容器约束和状态同步：
- 根容器必须设
position: relative; height: 100vh，且禁止body滚动（overflow: hidden或touch-action: manipulation） - 底部区域用
position: absolute; bottom: 0; width: 100%，内部用display: flex布局按钮，不依赖外部文档流 - 监听
focusin到input或textarea时，立即检查window.innerHeight是否比初始值小 >200px；若是，给底部区加keyboard-active类，将其position改为static并设margin-top: auto，让它“沉”到内容区底部而非被顶起 - blur 后需
setTimeout(() => { window.scrollTo(0, 0) }, 100)强制恢复滚动锚点，尤其 iOS 微信 WebView 中收起键盘后常卡在高位
容易踩的坑：relative容器高度失真怎么办
100vh 在键盘弹出时仍等于物理屏幕高度，不是可用视口高度，所以不能直接靠它撑开 relative 容器。必须配合：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，启用安全区适配 - 用
env(safe-area-inset-bottom)动态设置容器padding-bottom，避免底部被遮挡 - 若需兼容老浏览器，降级用 JS 记录初始
screen.height，键盘弹出时估算高度差作为 bottom 偏移量，再设bottom: calc(0px + [键盘高度]px) - 绝对定位元素内若有
transform或overflow: hidden父级，getBoundingClientRect()可能返回错误坐标，务必先确认document.activeElement === inputEl
什么时候该放弃模拟，直接嵌入输入框
如果底部按钮语义上就是输入操作的一部分（比如聊天页的「发送」、搜索页的「语音」），最稳方案是彻底脱离 fixed/absolute 思维：
- 把按钮作为
input的兄弟节点，用display: flex包裹在同一个表单容器里 - 按钮设
margin-left: auto或align-self: flex-end实现右对齐 - 键盘弹出时，整个容器随 input 自动上推，无任何视口计算逻辑
- 此方案不依赖任何事件监听，无兼容性风险，但只适用于按钮与输入强绑定的场景
focusin 触发太早，resize 在 iOS 上常延迟或不触发，visualViewport 又不支持旧版 WebView。必须组合阈值判断 + 防抖 + 状态缓存，否则按钮会在弹出/收起瞬间反复跳动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
