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

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

在 body 元素上溢出

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

<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)建了滾動機(jī)制，它也不會像在較小的容器中那樣幹?jǐn)_粘性行為 - 除非設(shè)置溢出：隱藏，這會消除滾動溢出視口的任何內(nèi)容的能力。 </p>

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

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

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

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

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

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

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

<p>下面的 CodePen 示範(fàn)了黏性行為。滾動視窗以查看正在運行的黏性標(biāo)題：</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 標(biāo)題都使用position:sticky和top:0進(jìn)行樣式化，確保當(dāng)您滾動內(nèi)容時它會粘在視口的頂部。然而，黏性標(biāo)題仍然局限於各自的部分。一旦某個部分的內(nèi)容完全滾動過去，其標(biāo)題就會向上移動，從而使下一個標(biāo)題保持在原位。這表明黏性元素不會逃離其父容器。 </p>

<h2>
  
  
  結(jié)論
</h2>

<p>當(dāng)黏性元素?zé)o法如預(yù)期運作時，建立網(wǎng)頁可能會令人沮喪。但是，了解祖先溢出屬性和父容器高度等關(guān)鍵因素可以幫助您解決黏性定位問題。 </p>

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

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

<p>隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監(jiān)控和追蹤生產(chǎ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 就像是網(wǎng)路和行動應(yīng)用程式的 DVR，記錄網(wǎng)路應(yīng)用程式、行動應(yīng)用程式或網(wǎng)站中發(fā)生的所有情況。您無需猜測問題發(fā)生的原因，而是可以匯總並報告關(guān)鍵的前端效能指標(biāo)、重播用戶會話以及應(yīng)用程式狀態(tài)、記錄網(wǎng)路請求並自動顯示所有錯誤。 </p>

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