答案：使用position: fixed將導(dǎo)航欄固定在視窗底部，通過(guò)bottom: 0和width: 100%實(shí)現(xiàn)全屏貼底，結(jié)合flex布局均勻分布導(dǎo)航項(xiàng)，設(shè)置z-index確保層級(jí)最高，為避免內(nèi)容被遮擋，主體添加padding-bottom，移動(dòng)端可優(yōu)化背景模糊與陰影提升體驗(yàn)。

要實(shí)現(xiàn)一個(gè)固定在頁(yè)面底部的導(dǎo)航欄，使用 CSS 非常簡(jiǎn)單。關(guān)鍵是利用 position: fixed 屬性，讓導(dǎo)航欄始終停留在視窗底部，不隨頁(yè)面滾動(dòng)而移動(dòng)。

1. 基本結(jié)構(gòu)和樣式

先寫(xiě)一個(gè)簡(jiǎn)單的 HTML 導(dǎo)航結(jié)構(gòu)：

然后用 CSS 將其固定在底部：

說(shuō)明：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

• position: fixed 讓元素脫離文檔流，相對(duì)于視窗定位
• bottom: 0 貼住視窗最底部
• width: 100% 撐滿整個(gè)屏幕寬度
• z-index: 1000 確保導(dǎo)航欄在其他內(nèi)容之上
• display: flex 讓導(dǎo)航項(xiàng)均勻分布

2. 避免內(nèi)容被遮擋

由于 fixed 元素會(huì)覆蓋頁(yè)面內(nèi)容，底部的內(nèi)容可能被導(dǎo)航欄擋住。解決方法是給頁(yè)面主體添加 padding-bottom，留出足夠空間：

ViiTor實(shí)時(shí)翻譯

AI實(shí)時(shí)多語(yǔ)言翻譯專(zhuān)家！強(qiáng)大的語(yǔ)音識(shí)別、AR翻譯功能。

116

查看詳情

或者給 <main> 或主要容器設(shè)置相同的 padding。

3. 適配移動(dòng)端

在手機(jī)上，可以增加一些優(yōu)化：

• 使用 box-shadow 增加層次感
• 設(shè)置 backdrop-filter: blur(10px) 實(shí)現(xiàn)毛玻璃效果（可選）
• 確保點(diǎn)擊區(qū)域足夠大，提升觸控體驗(yàn)

.bottom-nav {
??...
??box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
??background: rgba(255,255,255,0.9);
??backdrop-filter: blur(10px);
}

4. 完整示例關(guān)鍵點(diǎn)

確保導(dǎo)航欄：

• 在所有設(shè)備上都貼底顯示
• 不影響頁(yè)面內(nèi)容閱讀
• 視覺(jué)清晰，易于點(diǎn)擊
• 不會(huì)被鍵盤(pán)或其他彈出層頂起（在移動(dòng)端注意測(cè)試）

基本上就這些。固定底部導(dǎo)航欄不復(fù)雜，但細(xì)節(jié)決定體驗(yàn)。

以上就是如何用css實(shí)現(xiàn)固定底部導(dǎo)航欄的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！