必须在主内容容器（如）设置padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom))并配viewport-fit=cover，因fixed元素脱离文档流不占空间，需主动预留安全区与导航高度。
移动端底部悬浮菜单栏（如导航栏、Tab 栏）用 position: fixed 实现后，主内容常被遮挡——这不是 bug，而是 CSS 规范行为：fixed 元素完全脱离文档流，不占空间，浏览器渲染时“看不见”它，文字、按钮自然就长进菜单栏下面了。关键不是调位置，而是让主内容主动“避让”。
主容器加 padding-bottom 预留空间
这是最直接、兼容性最好的解法。不要给 加，而是在主内容容器（如 <main></main> 或 <div class="content">）上设置：
<ul>
<li>用 CSS 自定义变量统一管理高度：<code>:root { --nav-height: 56px; }
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则 env() 不生效避免用 margin-bottom 的原因
虽然 margin-bottom 看似也能“撑开”空间，但它不参与文档流高度计算，会导致以下问题：
-
scrollHeight值不准，影响滚动监听和IntersectionObserver - 某些第三方组件（如下拉刷新、虚拟滚动）依赖真实高度，会误判边界
- 在 flex 布局中，margin 可能被折叠或失效，不如 padding 可控
适配 iPhone X+ 手势条与软键盘
单纯写 bottom: 0 会让菜单沉进系统手势条区域，用户点不到；软键盘弹出又可能让 fixed 元素错位上浮：
- iOS 安全区偏移值由
env(safe-area-inset-bottom)返回（iPhone X+ 约 34px），Android 旧版本忽略该值，自动 fallback 为 0，无副作用 - 绝对不要在底部菜单内部放
<input>或<textarea></textarea>，这会强制重排视口，加剧错位 - 所有可聚焦元素（如搜索框）加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡
z-index 与层叠上下文避坑
层级设太高反而引发问题：
- 别无脑写
z-index: 9999，容易压住系统级弹窗（如 iOS 分享面板、日期选择器） - 推荐分层：底部菜单用
z-index: 100，弹窗类组件用z-index: 1000，中间留缓冲区间 - 检查菜单外层是否用了
transform、filter或will-change——这些会隐式创建新层叠上下文，导致子元素 z-index 失效 - 真机调试时，用 Safari 开发者工具看 computed 样式，确认
position仍是fixed，没退化成static
