使用position: fixed可实现底部导航栏，通过bottom: 0固定位置，配合z-index和box-shadow提升视觉层级，并用padding-bottom预留空间防止内容遮挡，适配移动设备时结合env(safe-area-inset-bottom)确保安全显示区域。
要在网页中实现一个固定在页面底部的导航栏，使用 CSS 的 position: fixed 是最直接有效的方法。这样可以让导航栏始终显示在浏览器窗口的底部，即使用户滚动页面也不会消失。
1. 使用 position: fixed 固定底部位置
将导航栏元素设置为 position: fixed，并指定 bottom: 0，即可将其固定在视口底部。
注意：由于元素脱离了正常文档流，可能会覆盖页面内容，需要预留空间避免遮挡。示例代码：
<nav class="bottom-nav"> <a href="#home">首页</a> <a href="#profile">我的</a> <a href="#settings">设置</a> </nav>
对应CSS：
立即学习“前端免费学习笔记（深入）”；
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
2. 避免内容被遮挡
因为 fixed 元素不占文档空间，页面内容可能被导航栏挡住。可以通过给主体内容添加 padding-bottom 或 margin-bottom 来解决。
建议做法：
- 测量导航栏的高度（例如 60px）
- 给 body 或主容器设置 padding-bottom 等于该高度
示例：
body {
padding-bottom: 60px; /* 和导航栏高度一致 */
}
3. 适配移动设备和安全区域
在 iPhone 等设备上，底部可能存在操作条（如 Home 指示条），需使用 env() 函数留出安全间距。
改进版CSS：
.bottom-nav {
position: fixed;
bottom: env(safe-area-inset-bottom, 0);
left: 0;
width: 100%;
/* 其他样式保持不变 */
}
这样可以确保导航栏不会被设备的圆角或指示条遮挡。
4. 提升用户体验的小技巧
- 使用 z-index 确保导航栏在其他内容之上
- 添加 box-shadow 增加层次感
- 用 flex 布局让导航项均匀分布
- 在小屏幕上设置 height 和 line-height 保证可点击区域足够大
基本上就这些。使用 position: fixed 实现底部导航简单高效，只需注意布局遮挡和设备兼容性即可。
