必须为主内容容器设置margin-bottom以预留空间，值为选项卡高度加env(safe-area-inset-bottom)，并启用viewport-fit=cover；否则fixed元素会遮盖内容、在ios键盘弹出或安全区下错位。
直接用 position: fixed + bottom: 0 能实现视觉上的“固定”，但真机上遮内容、iOS 键盘弹起错位、刘海区被截断——这些不是 bug，是没处理脱离文档流和安全区的必然结果。
为什么 fixed 底部选项卡总遮住主内容？
position: fixed 元素完全脱离文档流，浏览器渲染主内容时根本不知道它存在。文字、表单、按钮全“长”进选项卡下方，尤其在 iOS Safari 或微信 WebView 中滚动+软键盘触发后更明显。
- 别指望自动留空——CSS 不会为你计算高度
-
margin-bottom必须加在主内容容器（如<main></main>或.content）上，而不是body；后者会影响scrollHeight和IntersectionObserver - 值必须等于选项卡真实高度（含内边距、边框）+ 安全区偏移，不能硬写
60px
如何正确预留底部空间且兼容 iOS/Android？
用 CSS 变量统一管理高度，并配合 env(safe-area-inset-bottom) 动态适配：
:root {
--tabbar-height: 60px;
}
main {
margin-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}
同时必须加这个 meta 标签，否则 env() 在 iOS 上不生效：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- Android 旧版本忽略
env()会 fallback 为 0，无副作用 - iOS 返回约 34px（Home Indicator 区域），
viewport-fit=cover是前提 - 避免在
body上设padding-bottom—— 会导致滚动判断失准
iOS Safari 中 bottom: 0 失效或跳动怎么办？
不是代码写错了，而是 iOS Safari 对 position: fixed 的滚动容器有特殊限制：页面高度超视口、用户正在滚动时，bottom: 0 元素可能短暂消失或卡在错误位置。
- 给
body加height: 100vh（不是100%），锚定视口高度 - 检查选项卡父级是否用了
transform、filter或will-change—— 这些会隐式创建新层叠上下文，导致fixed退化为absolute - 真机调试时，在 Safari 开发者工具里看 computed 样式，确认
position仍是fixed
z-index 和层叠陷阱怎么避？
z-index: 9999 很危险：可能压住 iOS 系统级弹窗（如分享面板、日期选择器），也可能被父容器隐式创建的层叠上下文截断。
- 设
z-index: 100给选项卡，弹窗类组件设z-index: 1000，中间留缓冲区间 - 禁止在选项卡内部放
<input>或<textarea></textarea>—— 这会强制重排视口，加剧错位 - 所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡
真正难的不是写 position: fixed，而是让它的定位在各种滚动、键盘、安全区场景下都稳定；很多问题只在真机上暴露，模拟器看不出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
