移动端底部菜单稳定悬浮需用position:fixed+bottom:0，但须配合viewport-fit=cover、env(safe-area-inset-bottom)适配刘海屏，js监听focus动态隐藏防遮挡输入框，并避免transform等创建新层叠上下文。
移动端底部菜单固定悬浮的CSS核心写法
直接用 position: fixed + bottom: 0 是最简方案，但真正在 iOS 和 Android 上稳定悬浮，必须配合 viewport 设置和防滚动穿透处理。
常见错误是只加 position: fixed，结果在 Safari 中菜单随页面滚动“抖动”或被虚拟键盘顶起；Android Chrome 则可能因地址栏收缩导致菜单跳动。
-
bottom: 0必须搭配left: 0和right: 0，否则在横屏或缩放时宽度不占满 - 父容器不要设
transform、perspective或filter，否则会创建新层叠上下文，使fixed失效（降级为 relative） - 给菜单加
z-index: 1000，避免被弹窗、广告等遮挡
解决 iOS Safari 虚拟键盘顶起底部菜单的问题
iOS 键盘弹出时会强制重设视口高度，fixed 元素会跟着被“顶上去”，这不是 bug，而是 WebKit 的行为设计。不能靠监听 resize 硬拉回来，容易触发渲染卡顿。
更稳妥的做法是：让菜单脱离键盘影响区域，即用 position: absolute 配合动态计算 bottom 值，再结合 viewport 的 height 控制。
- 在
中设置：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 给 body 加
padding-bottom（等于菜单高度），再用absolute定位菜单到bottom: env(safe-area-inset-bottom) - 关键兼容写法：
bottom: calc(env(safe-area-inset-bottom) + 0px)，防止某些旧版 Safari 解析失败回退为 0
避免 fixed 底部菜单遮挡输入框或触发页面滚动
当用户点击输入框聚焦，页面自动滚动时，fixed 菜单会盖住输入框——尤其在安卓上，系统会把焦点元素“往上推”，而菜单纹丝不动。
这不是 CSS 能单独解决的，需要 JS 协同判断是否聚焦中，并临时隐藏或降低菜单层级。
- 监听
focusin事件，对input、textarea触发时给菜单加 class：menu--hidden（用visibility: hidden，保留占位） - 监听
focusout后延迟 300ms 恢复（防止快速切换输入框误判） - 禁止菜单内元素获得焦点：
tabindex="-1"，避免键盘导航误入菜单打断表单流程
适配刘海屏与全面屏的安全区域
仅靠 bottom: 0 在 iPhone X 及后续机型上，菜单会陷入屏幕底部黑条里，用户点不到。必须用 env(safe-area-inset-bottom) 补齐安全距离。
这个环境变量在不支持的浏览器中会被忽略，所以必须提供 fallback。
- CSS fallback 写法：
padding-bottom: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); - 菜单高度建议用
min-height而非固定height，适应不同字体缩放或系统字号设置 - 如果菜单含图标+文字，注意
line-height和padding在小屏上的可点击性，最小触控高度保持 ≥44px
真正难的不是写几行 CSS，而是理解 fixed 在不同 WebView 中的行为差异，以及何时该让步给 JS 动态控制。安全区、键盘、滚动、缩放——四个变量任意组合，都可能让“固定”变成“飘忽”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
