position: fixed在移动端易错位或消失，因视口不稳定：ios聚焦输入框会缩放重排、安卓vh解析异常、viewport缩放致像素偏移；软键盘弹出后元素常卡空白处，横屏时width超屏，需用vw/vh适配、监听focus/blur临时切absolute、优先用sticky替代。
position: fixed 在响应式布局里不是“设了就完事”，而是最容易出问题的定位方式之一。它会脱离文档流、相对于视口定位，但视口本身在移动端缩放、软键盘弹出、横竖屏切换时并不稳定——直接写 top: 0; left: 0; width: 100px; 几乎必然在 iPhone 或安卓小屏上错位或遮挡内容。
为什么 fixed 元素在移动端经常“飘”或“消失”
iOS Safari 聚焦输入框时会缩放页面、重排视口，position: fixed 元素可能被错误锚定到滚动容器而非真实视口；安卓部分浏览器对 vh 单位解析异常（比如把软键盘高度算进 100vh）；还有 viewport 缩放、双击放大等行为会让 left: 20px 实际像素偏移量失真。
- 软键盘弹出后，
fixed元素常卡在页面顶部下方空白处，不再贴顶 - 横屏切换时，
width: 300px可能超出屏幕，导致横向滚动或截断 - 用
transform: translateX(-100%)隐藏侧边栏，但未配合overflow: hidden，仍可拖动查看
用 vw/vh 替代 px 控制尺寸和位置
固定像素值（如 width: 240px）无法适配不同 DPR 和屏幕宽度；vw 和 vh 是视口单位，能随设备自动缩放，但要注意它们基于初始视口，不是当前滚动后视口。
-
width: 100vw比width: 100%更可靠——后者依赖父容器宽度，而100vw始终是屏幕物理宽度 -
height: 8vh适合导航栏，比height: 60px更适应大屏手机或平板 - 慎用
top: 5vh+bottom: 5vh同时设置，某些 Android 浏览器会冲突，优先选单边（如只设top）
iOS 输入框场景下临时降级为 absolute
监听 focus 和 blur 事件，在软键盘弹出时把 position: fixed 切换成 position: absolute，并动态计算 top 值（基于当前 window.scrollY），键盘收起再切回 fixed。
- 不要只监听
input，要覆盖textarea和contenteditable元素 - 切换时加
transition: none防止闪烁，否则视觉跳变明显 - 避免在
body上直接scrollTop，这会触发 iOS 页面重绘抖动
优先考虑 position: sticky 替代 fixed
sticky 是 relative 和 fixed 的混合体：滚动前按正常流布局，到达阈值（如 top: 0）后才固定。它天然兼容响应式，不触发视口重算，且在 iOS Safari 中表现远优于 fixed。
-
.header { position: sticky; top: 0; z-index: 100; }就能实现顶部吸附，无需 JS 干预 - 注意父容器不能有
overflow: hidden或transform，否则 sticky 失效 - IE 不支持，如需兼容 IE11，必须 fallback 到 JS 模拟（如监听 scroll 手动 setStyle）
真正难的不是怎么写 position: fixed，而是判断什么时候不该用它——尤其当设计稿里写着“始终悬浮在右下角”时，先试试 sticky 或 absolute + 容器 relative，往往更稳。视口单位只是起点，真机测试才是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
