介紹 在網頁開發中，底部導航是一個非常常見的組件之一。但是，當我們的頁面內容長度超出瀏覽器窗口時，底部導航就會被內容遮擋。為了解決這個問題，我們可以使用CSS中的固定定位（Fixed Positioning）。 固定定位將DOM元素固定在視窗中的一個位置，這個位置通常是相對于視窗的邊界。這種定位方式不會受到文檔流的影響，也就是說，即使頁面發生滾動，定位元素仍然保持在原來的位置。 實現步驟 首先，我們需要創建一個底部導航的HTML結構。例如：

<nav class="bottom-nav">
<a href="#">首頁</a>
<a href="#">分類</a>
<a href="#">購物車</a>
<a href="#">我的</a>
</nav>

接下來，我們需要為底部導航添加CSS樣式，并使用固定定位將其固定在視窗底部。例如：

.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #fff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.bottom-nav a {
display: inline-block;
line-height: 50px;
padding: 0 20px;
}

在上面的代碼中，我們通過設置`position: fixed`將底部導航固定在瀏覽器窗口底部。`bottom: 0`將導航元素與視窗底部對齊，`left: 0`和`right: 0`將導航元素的寬度設置為100%。`height`屬性設置導航元素的高度，`background-color`設置導航背景色，`box-shadow`設置導航下方的陰影效果。 最后，我們可以為導航標簽添加合適樣式，調整與頁面展示效果的匹配。 結論 通過固定定位，我們可以輕松地實現一個固定在頁面底部的導航。這種定位方式可以保證導航元素的可見性，不受頁面滾動的影響，使得用戶體驗更加友好。