根本原因是浏览器视口高度动态变化而css未响应式重排；应使用100dvh替代100vh，配合position: relative/absolute锚定表单，并临时禁用body滚动以阻止键盘触发的默认滚动行为。
为什么多个 <form></form> 里的 <input> 一聚焦就错位
根本原因是浏览器对视口高度的重算逻辑与 CSS 布局模型冲突。当任意一个 <input> 获得焦点，iOS Safari 或 Android Chrome 会收缩视口高度（window.innerHeight 变小），但若页面使用了 100vh、position: fixed 或 flex column 布局，容器不会自动重排，导致底部表单区域被“顶出”可视区或与其他元素堆叠。这不是 bug，而是视口变化后样式未响应式适配的必然结果。
position: fixed 在表单区域上的误用陷阱
很多方案直接给分类栏或表单容器加 position: fixed; bottom: 0;，看似锚定底部，实则埋下三处隐患：
- 它脱离文档流，但未设置
width和left/right，宽度可能坍缩为内容宽，尤其在 flex 子项中不可靠 - 多个
fixed元素若共用相同bottom值，会相互覆盖而非垂直排列 - 键盘弹出时，
fixed元素仍按原始window.innerHeight定位，而此时视口已变矮，造成视觉上“上浮”
真正有效的视口高度锁定策略
关键不是禁用键盘行为，而是让布局对 innerHeight 变化不敏感。推荐组合使用：
- 根容器用
height: 100dvh;（非100vh），dvh是动态视口单位，iOS 16+/Android Chrome 100+ 支持，能响应键盘弹出时的真实可用高度 - 表单区域外层包裹一层
position: relative;，内部子元素用position: absolute; bottom: 0;锚定，避免依赖父容器高度计算 - 禁用 body 滚动：在聚焦
<input>时临时加body { overflow: hidden; }，失焦后恢复——这能阻止键盘触发的默认滚动行为
jQuery 或主题脚本干扰输入焦点的快速验证法
如果你发现表单在桌面正常、移动端却反复闪退或错位，大概率是 JS 干预了原生聚焦流程。验证步骤极简：
- 打开 DevTools → Elements 面板，右键删掉疑似问题脚本，例如
<script id="divi-custom-script-js"></script> - 刷新页面，点
<input>—— 若键盘不再闪退、位置不再偏移，就是它 - 进一步确认：在 Console 执行
document.addEventListener('focusin', e => console.log(e.target), true)，看是否有多余的blur()调用或preventDefault()出现在 log 中
这类干扰往往藏在压缩 JS 里，不暴露错误，只破坏事件流。修复方式不是改 CSS，而是隔离或 patch 对应脚本的 focus 监听器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
