position: fixed在移动端键盘弹起时移位，根本原因是浏览器将fixed锚定在视觉视口底部，而键盘压缩该视口却未触发重算；直接改absolute仍错位，因依赖的relative祖先容器高度不可控，须同步约束容器、监听focusin/blur并动态切换定位状态。
position: fixed 在移动端键盘弹起时移位，不是你 CSS 写错了，而是浏览器把 fixed 锚定在「视觉视口（visual viewport）」底部，而软键盘一弹，这个视口高度就塌了——但 fixed 元素不会自动重算位置，结果就飘在半空。改用 absolute 或 flex 不是换写法那么简单，关键得绕过视口失真这个根问题。
为什么不能直接把 fixed 换成 absolute
直接把 bottom: 0 改成 position: absolute; bottom: 0 依然会错位，因为 absolute 的定位基准是最近的 position: relative 祖先容器，如果这个容器本身高度不可控（比如依赖 100vh），那它也会被键盘顶变形。
必须同步做三件事：
- 根容器设
position: relative; height: 100vh，并加overflow: hidden或touch-action: manipulation禁用 body 滚动 - 底部区域用
position: absolute; bottom: 0; width: 100%，内部用display: flex布局按钮，不依赖文档流 - 监听
focusin到input或textarea，检查window.innerHeight是否比初始值小 >200px；若是，临时切为position: static+margin-top: auto，让它“沉”到底部内容区里
用 flex 布局替代 fixed 的真实前提
flex 本身不解决 fixed 错位，它只是布局工具。所谓“用 flex 就行”，其实是用了 display: flex; flex-direction: column 的父容器 + margin-top: auto 把底部元素“推”到视觉底部——但这要求父容器高度稳定、内容区可独立滚动。
可行组合是：
- 根容器设
position: relative; height: 100vh; display: flex; flex-direction: column - 内容区用
overflow-y: auto; -webkit-overflow-scrolling: touch独立滚动 - 底部区不设
position，只靠margin-top: auto占满剩余空间 - 必须监听
window.resize和focusin/blur双通道：iOS 上100vh在键盘弹出时仍等于物理屏高，会导致容器撑不开，需用setTimeout(() => { window.scrollTo(0, 0) }, 100)强制恢复锚点
什么时候该放弃 absolute / flex，直接嵌入输入框
如果底部按钮语义上就是输入操作的一部分（比如聊天页的「发送」、搜索页的「语音」），最稳方案是彻底脱离 fixed/absolute 思维：
- 把按钮作为
input的兄弟节点，放在同一个position: relative容器里 - 用
display: flex; justify-content: space-between或align-items: center控制对齐 - 不再依赖视口定位，自然规避所有键盘导致的高度误判
- 代价是按钮会随内容滚动，但对这类强上下文操作，反而是更符合用户预期的行为
window.innerHeight 不会立刻恢复、focusin 触发时坐标还没更新、Safari 对 scrollTo 有节流——这些细节不处理，再漂亮的 absolute 或 flex 都会在真机上闪退或卡死。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
