要實現(xiàn)sticky header 或footer，關(guān)鍵在於正確使用position: sticky。實現(xiàn)sticky header 時需設(shè)置position: sticky 和top: 0，並確保父容器不設(shè)overflow: hidden，建議加z-index 防覆蓋；1. sticky header 不脫離文檔流，滾動到頂部時固定，不影響其他內(nèi)容佈局；2. 實現(xiàn)sticky footer 需包裹main 內(nèi)容並設(shè)置footer 的position: sticky 和bottom: 0，但僅在內(nèi)容不足一屏時生效；3. 使用sticky 時需注意：父元素不能有overflow: hidden/scroll/auto、必須指定top 或bottom、避免使用transform/filter/will-change 等屬性、sticky 元素高度不可超過包含塊。 sticky 是實用但有限制的屬性，適用場景為依賴滾動上下文的固定定位。

做sticky header 或者footer 其實不難，關(guān)鍵在於用好position: sticky 。它不像fixed 那樣脫離文檔流，而是介於relative 和fixed 之間，可以根據(jù)滾動位置“粘”在屏幕上。但要用對它，有幾個細節(jié)必須注意。

Sticky Header 的基本寫法

想讓header 固定在頂部？只需要給header 設(shè)置position: sticky ，然後加上top: 0 。這樣瀏覽器就知道：當這個元素滾動到頂部時，就把它固定住。

 header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

需要注意幾點：

• 父容器不能是overflow: hidden ，否則sticky 不生效。
• 最好加個z-index ，防止被其他內(nèi)容蓋住。
• 它本身不會佔據(jù)空間消失，這點和fixed 不一樣。

比如你有個導航欄，上面還有banner 圖，sticky header 滾動上去後會自然覆蓋banner，但頁面其他內(nèi)容繼續(xù)滾動。

Sticky Footer 的實現(xiàn)方式

Footer 要sticky 在底部稍微麻煩點，因為大多數(shù)時候我們希望它默認顯示在內(nèi)容最後，只有當內(nèi)容不夠高時才貼在屏幕底部。這需要一點結(jié)構(gòu)配合。

一種常見做法是使用一個wrapper 容器包裹主要內(nèi)容，並設(shè)置footer 為sticky：

 <div class="wrapper">
  <main>頁面內(nèi)容</main>
  <footer class="sticky-footer">這裡是底部</footer>
</div>

CSS：

 .sticky-footer {
  position: sticky;
  bottom: 0;
  background: white;
}

不過這種方式只適用於內(nèi)容高度不足一屏的情況。如果內(nèi)容很長，footer 還是會正常滾動出去。如果你希望footer 始終在視口底部（類似fixed），那還是得用position: fixed 。

常見問題和注意事項

使用sticky 的時候，有些坑容易踩，這裡列幾個常見的：

• 父元素設(shè)置了overflow: hidden/scroll/auto → sticky 失效
• 沒有指定top或bottom → 瀏覽器不知道你要粘在哪
• 使用了transform 、 filter 、 will-change等屬性→ sticky 可能失效
• sticky 元素的高度不能超過其包含塊的高度→ 否則可能不會stick

所以寫完記得檢查這些地方。有時候明明寫了sticky 卻沒反應(yīng)，多半是這些原因。

基本上就這些。 sticky 是個很實用的屬性，只要記住它依賴滾動上下文，不是所有情況都適用。掌握好這些點，做sticky header 或footer 就不難了。

以上是如何使用CSS位置粘性創(chuàng)建粘性標頭或頁腳的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！