article {
  align-items: start;
  /* ... */
}

在下面的 CodePen 中，您可以滾動該部分以觀察黏性標題現(xiàn)在如何貼在該部分本身中。新增了邊框以可視化可滾動區(qū)域：

在 body 元素上溢出

在 body 元素上設定溢出通常不會像其他祖先元素那樣破壞黏性定位：

<p>這是因為主體為整個頁面創(chuàng)建了主要滾動上下文，並且在這種情況下，粘性元素仍然相對於視口粘著：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>即使創(chuàng)建了滾動機制，它也不會像在較小的容器中那樣幹擾粘性行為 - 除非設置溢出：隱藏，這會消除滾動溢出視口的任何內容的能力。 </p>

<p>現(xiàn)在我們已經介紹了常見的黏性問題，您可以閱讀有關位置屬性和黏性位置的更一般性概述。 </p><h2>
  
  
  職位屬性的簡要概述
</h2>

<p>CSS 位置屬性控制元素在網頁上的定位方式。使用相對、絕對、固定或黏性等值，您可以使用其包含區(qū)塊或視窗中的頂部、右側、底部和左側屬性來調整元素的位置。這些值也使元素能夠使用 z-index 進行相對定位。 </p>

<p>但是，請記住，這些偏移屬性（即上、右、下、左）和 z-index 不適用於具有預設靜態(tài)定位的元素。 </p>

<p>在解決黏性定位問題時，重新審視黏性值的意義會很有幫助。了解其行為可以更清楚地了解常見問題以及如何有效解決這些問題。 </p>

<h2>
  
  
  CSS 黏性位置
</h2>

<p>當您將position：sticky套用到元素時，它的行為類似於相對定位的元素，透過保持其在文件流程中的位置。然而，它也獲得了變得“粘性”並響應滾動的能力。 </p>

<p>如果您定義了一個偏移量，例如 top: 10px，則當您向下捲動時，該元素將黏在該位置，就像使用position:fixed 一樣。對於水平滾動，您可以使用向左或向右等偏移來實現(xiàn)類似的效果。值得注意的是，黏性行為僅適用於元素的包含區(qū)塊內。一旦滾動超過該區(qū)塊的邊界，黏性元素就會像任何普通元素一樣滾動消失。 </p>

<p>下面的 CodePen 示範了黏性行為。滾動視窗以查看正在運行的黏性標題：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>每個 HTML 標題都使用position:sticky和top:0進行樣式化，確保當您滾動內容時它會粘在視口的頂部。然而，黏性標題仍然局限於各自的部分。一旦某個部分的內容完全滾動過去，其標題就會向上移動，從而使下一個標題保持在原位。這表明黏性元素不會逃離其父容器。 </p>

<h2>
  
  
  結論
</h2>

<p>當黏性元素無法如預期運作時，建立網頁可能會令人沮喪。但是，了解祖先溢出屬性和父容器高度等關鍵因素可以幫助您解決黏性定位問題。 </p>

<p>透過本指南中的範例和提示，您將能夠確保黏性導覽、標題和側邊欄號召性用語順利運作。如果您發(fā)現(xiàn)本指南有幫助，請隨時在線分享。如果您有任何問題或貢獻，請在評論部分加入我！ </p><hr>

<h2>
  
  
  您的前端是否佔用了使用者的 CPU？
</h2>

<p>隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監(jiān)控和追蹤生產中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請嘗試 LogRocket。 </p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" class="lazy" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket 就像是網路和行動應用程式的 DVR，記錄網路應用程式、行動應用程式或網站中發(fā)生的所有情況。您無需猜測問題發(fā)生的原因，而是可以匯總並報告關鍵的前端效能指標、重播用戶會話以及應用程式狀態(tài)、記錄網路請求並自動顯示所有錯誤。 </p>

<p>現(xiàn)代化偵錯 Web 和行動應用程式的方式 - 開始免費監(jiān)控。 </p>