不能直接用 position: fixed 固定表单控件，因其脱离文档流、遮挡内容、滚动错位、响应式高度难同步，且 ios 聚焦时易被键盘顶出视口；应改用 display: flex + min-height: 100vh 布局，配合 vertical-align 统一对齐与 focus 时 scrollintoview 微调。
表单控件固定在网页顶部，不是靠 position: fixed 硬顶——它会切断文档流、遮挡内容、滚动错位，且响应式下高度难同步。
为什么不能直接给 form 或 input 加 position: fixed
加了 position: fixed 后，表单脱离正常布局流，main 内容会上移被遮盖；你得手动算 header 高度，再给 main 加 padding-top 补偿，但这个值在字体缩放、iOS 动态字号、横屏切换时极易失效。更麻烦的是：表单控件（如 input）获得焦点后，iOS Safari 会自动滚动页面，而 fixed 元素不随滚动移动，导致光标被键盘挡住、输入框“消失”在视口外。
用 display: flex + min-height: 100vh 实现真固定
让整个页面容器（通常是 body 或一个包裹 header、main、footer 的父 div）成为 flex 容器，表单所在区域（比如 header）自然固定在顶部，其余部分自适应：
body { min-height: 100vh; display: flex; flex-direction: column; }-
header { flex-shrink: 0; }—— 防止被压缩，高度由内容或显式height/min-height控制 -
main { flex: 1; overflow-y: auto; }—— 填满剩余空间，内部滚动不影响 header 位置 - 表单控件（
input、select等）直接放在header内，无需额外定位
表单控件自身对齐必须统一 vertical-align
即使容器固定了，控件之间仍容易上下错位——这不是 margin 问题，是浏览器默认按基线（baseline）对齐。常见现象：label 文字看着居中，但 input 底边却比 button 高一截。
- 对所有表单控件统一设
vertical-align: middle：包括input、select、textarea、button - 若 label 文字在 iOS Safari 中偏上，不要调
margin-top，改用line-height: 1.4或padding-top: 2px - 避免混用
inline-block和flex布局在同一行内，它们的基线计算逻辑不同，容易冲突
移动端聚焦时表单被键盘顶起的兼容处理
iOS 和部分安卓 WebView 中，input 获焦后会触发页面重排，fixed 元素不动，但软键盘弹出会挤压视口，导致表单控件被顶出可视区。
- 确保
header不设position: fixed，而是依赖 flex 布局的自然固定行为 - 在
input的focus事件里，用el.scrollIntoView({ block: 'nearest' })主动微调 - 避免在
header内使用transform: translateY()类动画，它会干扰浏览器对焦点元素的滚动判断 - 测试时务必在真机上验证，模拟器无法复现软键盘真实高度和滚动行为
真正稳定的“固定”，是让表单成为布局结构的一部分，而不是靠定位把它钉在屏幕上——后者看着简单，实则埋了滚动、聚焦、缩放、跨端适配四重坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
