用 position: fixed + display: flex 可实现稳定底部导航栏，但需解决视口变化、点击区域和可访问性问题；fixed 天然满足始终可见、不滚动、不遮挡的核心诉求，而 Flex 贴底仅适用于页脚，不适用于功能型导航栏。
直接说结论：用 position: fixed + display: flex 布局就能实现，但必须处理好视口高度变化、点击区域和可访问性这三类问题——否则在软键盘弹出、字体加载延迟或屏幕缩放时，导航栏会错位、截断或无法点击。
为什么 position: fixed 是首选而不是 Flex 贴底？
底部导航栏的核心诉求是「始终可见、不随内容滚动、不被遮挡」，position: fixed 天然满足；而用 Flex 把 footer 推到底部（比如 margin-top: auto）只适合页面级页脚，不适合功能型导航栏。后者一旦内容高度不足，导航栏就会上浮；一旦内容超长，它又可能被内容盖住或卡在中间。
常见错误现象：bottom-nav 在 iOS Safari 中偶尔消失、Android WebView 里图标被软键盘顶起、小屏上文字换行导致高度突变。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
position: fixed必须配合bottom: 0和left: 0; right: 0，不能只写bottom: 0 - 避免给父容器设
transform或filter，否则会创建新层叠上下文，导致z-index失效 - 移动端需额外加
touch-action: manipulation提升点击响应速度
flex 布局怎么用在导航项内部？
导航栏容器本身用 position: fixed 定位，但内部按钮排列强烈推荐用 Flex，而非 inline-block 或 float——因为后者在不同字号、图标加载时机下容易错位。
典型结构：
<nav class="bottom-nav"> <a href="/" class="nav-link active"><i class="icon-home"></i><span>首页</span></a> <a href="/search" class="nav-link"><i class="icon-search"></i><span>搜索</span></a> </nav>
对应样式关键段：
.bottom-nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 60px;
}
.nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
text-decoration: none;
color: #666;
}
.nav-link.active {
color: #007aff;
}
注意：
- 不要对
.nav-link设固定宽度，用flex: 1让其均分容器空间，适配不同数量的导航项 -
justify-content: center在flex-direction: column下控制图标与文字的垂直间距，比line-height更可靠 - 图标用
<i>标签 + 字体图标（如 iconfont），别用background-image，否则高 DPI 屏幕下模糊
移动端软键盘弹出后导航栏上浮怎么办？
这不是 CSS 写错了，是浏览器把软键盘当成“视口压缩”，100vh 重算后 fixed 元素仍按旧尺寸定位，导致位置偏移。纯 CSS 无解，必须 JS 干预。
最小可行方案：
function handleResize() {
document.body.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', handleResize);
handleResize(); // 初始化
更稳妥的做法（尤其在 Vue/React 项目中）：
- 监听
focusin和blur事件，在输入框聚焦时临时给.bottom-nav加position: absolute+bottom: 0，失焦后切回fixed - 避免用
scrollTo(0, 0)强制重绘，某些 Android WebView 会触发白屏 - 如果用 Cordova 或 Capacitor，优先接入
cordova-plugin-ionic-webview的键盘事件 API，比原生resize更精准
可访问性和语义化容易被忽略的点
很多团队只顾视觉效果，结果屏幕阅读器无法识别当前选中项、键盘用户无法 Tab 到导航项——这违反 WCAG 2.1 AA 级标准。
必须做的几件事：
- 用
<nav aria-label="主菜单">包裹整个导航栏，提供上下文 -
.nav-link必须是<a>或带role="link"的元素，不能只是<div> - 当前激活项除了加
active类，还要加aria-current="page" - 图标若无文字（比如仅用
?），需加aria-hidden="true"，文字部分用<span>包裹并确保可读
最后提醒一句：别为了“动画炫酷”牺牲触控面积——height: 60px 是 iOS Human Interface Guidelines 明确推荐的最小可触控高度，低于这个值，手指操作误触率会陡增。
