CSS 的 fixed 定位可以讓元素固定在頁面上的某個(gè)位置，而不會隨著頁面滾動而移動。將其應(yīng)用在底部元素上，就可以讓其固定在頁面底部，無論用戶如何滾動都不會隨之移動。

如何實(shí)現(xiàn)底部固定元素？首先，需要創(chuàng)建一個(gè)樣式類，將其位置設(shè)置為 fixed，display 設(shè)置為 block——這樣可以讓它占據(jù)一整行。接下來，設(shè)置 bottom 屬性為 0，將其定位于頁面底部。

.bottom {
position: fixed;
display: block;
bottom: 0;
width: 100%;
}

最后，將需要固定在底部的元素應(yīng)用該樣式類即可。

<div class="bottom">
<p>這是底部固定元素</p>
</div>

需要注意的是，如果底部元素高度過大，可能會擋住頁面其他內(nèi)容。這時(shí)，可以將底部元素設(shè)置為一個(gè)容器，把需要固定的內(nèi)容放在容器內(nèi)部，并設(shè)置容器高度為固定值，這樣就可以避免遮擋其他內(nèi)容了。

另外，如果需要兼容移動端，在設(shè)置 fixed 位置的同時(shí)，需要加上一個(gè) -webkit- 的前綴，這樣才能在 iOS 和 Android 系統(tǒng)中正常工作。

.bottom {
position: fixed;
position: -webkit-fixed;
display: block;
bottom: 0;
width: 100%;
}

這樣就可以輕松實(shí)現(xiàn)底部固定不隨滾動的效果了。