用 position: fixed 实现底部导航需设 bottom: 0、left: 0、right: 0、z-index 及 box-sizing: border-box；主内容区须加 padding-bottom 避让，点击区域应 ≥44px 并语义化。
fixed定位让导航始终停在视口底部
用 position: fixed 是最直接的方式，它让元素脱离文档流、相对于视口定位。关键不是“加了fixed就行”，而是得配合 bottom: 0 和合适的宽高控制，否则容易被内容遮挡或撑开页面。
- 必须设置
width: 100%（或left: 0; right: 0），否则默认只占内容宽度 - 记得加
z-index，尤其当页面有弹窗、侧边栏时，不然导航可能被盖住 - 如果 body 有 margin/padding，fixed 元素会相对视口边缘定位，和 body 内容不对齐——这时优先用
left: 0; right: 0替代width: 100%
盒模型细节决定是否贴底且不重叠
底部导航常被误认为“设个 height 就完事”，实际出问题多在 padding、border、box-sizing 上。浏览器默认 box-sizing: content-box，意味着你设 height: 60px，再加上 padding: 12px，真实高度就变成 84px，可能把内容顶上去或遮住最后一行文字。
- 统一写
box-sizing: border-box，让 width/height 包含 padding 和 border - 避免在导航容器上设
margin-bottom——fixed 元素的 margin 不影响布局，纯属无效代码 - 如果导航里有图标+文字，用
display: flex对齐比line-height更稳，后者在字体加载或缩放时容易偏移
移动端点击区域太小？别只改 font-size
很多底部导航在手机上点不准，表面看是按钮小，根因常是 touch target 不足 44px。CSS 里光调 font-size 或 height 不够，得确保可点击区域（比如 a 或 button）本身满足最小尺寸。
- 对导航项用
min-height: 44px+padding: 12px 0，比只设 height 更兼容不同字号 - 避免用空
div做点击区，没有语义且无法聚焦；优先用button或带role="button"的a - 在 iOS Safari 中，如果导航父容器有
transform（比如动画），可能触发独立层叠上下文，导致点击失效——此时去掉 transform 或加will-change: transform可缓解
滚动时内容被遮住？留出安全间距
fixed 导航盖住页面底部内容，不是 bug，是预期行为。但用户看不到最后几行文字，体验就断了。解决思路不是“让导航消失”，而是让主要内容区域主动避让。
立即学习“前端免费学习笔记（深入）”；
- 给主内容区（比如
.main）加padding-bottom: 60px（值 = 导航高度），比用margin-bottom更可靠 - 如果导航高度响应式变化（比如横屏变矮），用
calc(100vh - 60px)配合min-height不如 CSS 自定义属性 +@media控制 padding 更可控 - 别依赖 JS 动态计算高度来设 padding——首屏渲染时 JS 还没执行，白屏期内容仍会被遮
实际最难处理的是嵌套滚动场景：比如底部导航固定，但中间有个 overflow-y: auto 的列表区域。这时候列表滚动到底部，手指再往上划，容易误触导航项。这种交互冲突没法单靠 CSS 解决，得结合 touch 事件拦截或调整区域权重——但那是另一层问题了。
