移动端 fixed 不稳定是因渲染机制变化：safari 的 fixed 依赖合成层，transform 等属性会改变 containing block；软键盘导致视口重算、home indicator 遮挡需 safe-area 适配；须用 computed 面板验证定位上下文。
移动端的 position: fixed 表现远不如桌面端稳定——不是写法错了，是渲染机制和系统交互在“悄悄改规则”。
iOS Safari / 微信 WebView 中 fixed 元素突然偏移或抖动
根本原因是 Safari 的 fixed 定位依赖合成层（compositing layer），而 transform、will-change、filter 甚至 overflow: hidden 都可能意外创建新 containing block，让 fixed 元素不再相对于视口，而是相对于那个带 transform 的父容器定位。
常见现象包括：
- 滚动时按钮轻微跳动或延迟响应
- 右下角客服按钮贴着 header 下边缘，而不是 viewport 底边
- 软键盘弹出后，
bottom: 0的输入框直接“上浮”几十像素
排查方法：用 Safari 或 Chrome 开发者工具 → Elements → 选中元素 → Computed 面板查看 position 是否真为 fixed，再看 containing block 是不是 body 或 html。如果不是，往上逐级检查 transform、perspective、will-change。
软键盘弹出导致 fixed 错位
iOS Safari 在输入框 focus 时会缩放视口、重算 viewport 尺寸，bottom: 0 的 fixed 元素会跟着“上移”。这不是 bug，是 Safari 对视口语义的重新解释。
可行解法：
- 监听
input或textarea的focus事件，临时切换为position: absolute+top: calc(100vh - 60px)（60px 为键盘估算高度） - 改用
position: sticky实现顶部导航（sticky在键盘弹出时行为更可预测） - 避免在输入区域正上方/正下方放置关键 fixed 元素（比如不要把 submit 按钮设为
fixed紧贴输入框下方）
iPhone 底部 Home Indicator 遮挡 fixed 导航栏
不加安全区适配，bottom: 0 的 tab-bar 会被 iPhone X 及之后机型的横条完全遮住。硬写 padding-bottom: 34px 不行——不同机型安全区高度不同（iPhone SE 是 0，iPhone 15 Pro 是 34px）。
必须做两件事：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 缺了viewport-fit=cover，env(safe-area-inset-bottom)就是 0 - 给 fixed 底部容器（如
.tab-bar）加padding-bottom: env(safe-area-inset-bottom)，不是加在body上
别写 calc(60px + env(safe-area-inset-bottom)) —— 如果系统返回 0（比如 Android），反而多出空白。
小屏设备上点击区域太小或被虚拟键盘顶起
right: 24px; bottom: 24px 在桌面很稳妥，但在手机上容易被虚拟键盘顶走，或手指误触失败。
必须加的适配项：
- @media (max-width: 768px) 下把
bottom改为80px，留出操作安全区 - 按钮本身视觉尺寸哪怕只有 40px × 40px，也要用
padding或伪元素撑到至少48px × 48px - 加
touch-action: manipulation，禁用双击缩放和长按菜单 - 避免用
left: auto—— 浏览器根本不识别这个值，right才是明确声明方向
真正难处理的从来不是“怎么写 fixed”，而是它在移动端随时可能被系统、父容器、输入状态或安全区规则“接管”——得习惯用 Computed 面板查 containing block，而不是凭经验调 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
