使用 position: fixed 可实现底部固定工具栏。1. HTML 结构包含四个按钮；2. CSS 设置 position: fixed、bottom: 0、width: 100%、z-index 等确保工具栏固定底部并美观；3. 通过 padding-bottom 或 margin-bottom 避免内容被遮挡；4. 移动端适配添加 box-shadow、图标文字、touch-action 及 safe-area-inset-bottom 优化体验。
使用 CSS 的 position: fixed 可以轻松实现底部固定工具栏，无论页面如何滚动，工具栏始终停留在屏幕底部。
1. 基本结构 HTML
先写一个简单的工具栏结构：
<div class="toolbar"><button>首页</button>
<button>分类</button>
<button>购物车</button>
<button>我的</button>
</div>
2. 核心 CSS 样式
使用 position: fixed 将工具栏固定在视窗底部：
.toolbar {position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 1px solid #ddd;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
关键点说明：
立即学习“前端免费学习笔记（深入）”；
- position: fixed：脱离文档流，相对于浏览器窗口定位
- bottom: 0：紧贴视窗底部
- width: 100%：占满屏幕宽度
- z-index: 1000：确保层级足够高，不被其他内容遮挡
- border-top：增加视觉分隔感
3. 避免内容被遮挡
fixed 元素会覆盖原有内容，可在页面主体添加 padding-bottom 预留空间：
body {padding-bottom: 50px;
}
或者给主内容区域设置外边距：
.main-content {margin-bottom: 50px;
}
4. 适配移动端建议
为提升移动端体验，可添加以下优化：
- 使用 box-shadow 增加层次感
- 按钮用图标 + 文字更清晰
- 设置 touch-action: manipulation 提升点击响应
- 考虑 iPhone 安全区域：
padding-bottom: env(safe-area-inset-bottom);
