必须配合env(safe-area-inset-bottom)适配iOS安全区并手动预留padding-bottom空间，因fixed元素脱离文档流且bottom:0会压入不可点击手势条区域，需<meta viewport-fit=cover>启用变量，主内容用padding-bottom:calc(60px+env(safe-area-inset-bottom))避让，避免margin-bottom折叠及父容器创建新层叠上下文。
直接用 position: fixed + bottom: 0 是最简路径，但不加安全区适配和内容避让，90% 的项目会在 iPhone X+ 或软键盘弹出时出问题——不是“能用”，而是“看似能用、一交互就错位”。
为什么 fixed 定位必须配合 env(safe-area-inset-bottom)
iOS 安全区底部（手势条区域）不参与 CSS 布局计算，bottom: 0 会把导航栏压进不可点击区域。安卓虽无此问题，但统一写法可避免分支逻辑。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，否则env(safe-area-inset-bottom)返回 0 - 主内容容器（如
<main>）要加padding-bottom: calc(60px + env(safe-area-inset-bottom))，其中60px是你导航栏实际高度 - 别用
margin-bottom：在 flex 或 document flow 中易被折叠，padding才真正“撑开空间” - 微信 WebView 对
env()支持良好（2026 年实测），无需 UA 判断兜底
flex 布局 + fixed 导航的协作要点
想用 flex 控制主体高度，又想让导航固定在视口底边——二者不能塞进同一个 flex 容器，必须“分家”。常见错误是把 <nav> 放进 display: flex; flex-direction: column 的根容器里，结果导航被 flex 挤压或错位。
- 根容器（如
<body>或外层<div class="app">）设display: flex; flex-direction: column; min-height: 100vh - 主内容区（如
<main>）设flex: 1; overflow-y: auto，它负责滚动，且已通过padding-bottom预留空间 - 导航栏
<nav class="bottom-nav">和<main>是兄弟元素，**不嵌套**，单独设position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 100 - 避免给导航父级加
transform、filter或will-change，这些会创建新层叠上下文，导致 fixed 失效（尤其在 iOS Safari）
sticky 底部定位为什么基本不用
position: sticky; bottom: 0 在移动端几乎不可靠：iOS Safari 15.4 之前完全不支持 bottom，微信 WebView 基本忽略，Android 低版本行为不一致。就算支持，它只在父容器内粘滞，而移动端页面高度常动态变化（地址栏显隐、软键盘），父容器高度约束极难稳定。
立即学习“前端免费学习笔记（深入）”；
- 若真要用 sticky，必须确保其父容器有明确
height且可滚动（如max-height: 100vh; overflow-y: auto），但这样导航就只在该容器内吸底，不是“视口底部” -
sticky无法响应软键盘弹出时的视口高度变化，fixed + padding 组合才是事实标准 - 真机调试时，用 Safari 开发者工具检查 computed
position值——若显示为static而非sticky，说明已被浏览器降级，此时 fallback 已失效
最易被忽略的是：导航栏高度必须与 padding-bottom 中的数值严格一致，且这个值最好抽成 CSS 自定义属性（如 --nav-height: 60px），否则改一处漏一处；软键盘收起后视口高度重算，仅靠 CSS 无法自动回调，但只要 padding 预留到位，滚动位置和布局就不会崩。
