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

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

在 body 元素上溢出

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

<p>這是因?yàn)橹黧w為整個(gè)頁(yè)面創(chuàng)建了主要滾動(dòng)上下文，并且在這種情況下，粘性元素仍然相對(duì)于視口粘著：</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)建了滾動(dòng)機(jī)制，它也不會(huì)像在較小的容器中那樣干擾粘性行為 - 除非設(shè)置溢出：隱藏，這會(huì)消除滾動(dòng)溢出視口的任何內(nèi)容的能力。 </p>

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

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

<p>但是，請(qǐng)記住，這些偏移屬性（即上、右、下、左）和 z-index 不適用于具有默認(rèn)靜態(tài)定位的元素。 </p>

<p>在解決粘性定位問(wèn)題時(shí)，重新審視粘性值的含義會(huì)??很有幫助。了解其行為可以更清楚地了解常見(jiàn)問(wèn)題以及如何有效解決這些問(wèn)題。</p>

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

<p>當(dāng)您將position：sticky應(yīng)用到元素時(shí)，它的行為類似于相對(duì)定位的元素，通過(guò)保持其在文檔流中的位置。然而，它也獲得了變得“粘性”并響應(yīng)滾動(dòng)的能力。 </p>

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

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

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

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

<p>通過(guò)本指南中的示例和提示，您將能夠確保粘性導(dǎo)航、標(biāo)題和側(cè)邊欄號(hào)召性用語(yǔ)順利工作。如果您發(fā)現(xiàn)本指南有幫助，請(qǐng)隨時(shí)在線分享。如果您有任何問(wèn)題或貢獻(xiàn)，請(qǐng)?jiān)谠u(píng)論部分加入我！</p><hr>

<h2>
  
  
  您的前端是否占用了用戶的 CPU？
</h2>

<p>隨著 Web 前端變得越來(lái)越復(fù)雜，資源貪婪的功能對(duì)瀏覽器的要求越來(lái)越高。如果您有興趣監(jiān)控和跟蹤生產(chǎn)中所有用戶的客戶端 CPU 使用情況、內(nèi)存使用情況等，請(qǐng)嘗試 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)絡(luò)和移動(dòng)應(yīng)用程序的 DVR，記錄網(wǎng)絡(luò)應(yīng)用程序、移動(dòng)應(yīng)用程序或網(wǎng)站中發(fā)生的所有情況。您無(wú)需猜測(cè)問(wèn)題發(fā)生的原因，而是可以匯總并報(bào)告關(guān)鍵的前端性能指標(biāo)、重放用戶會(huì)話以及應(yīng)用程序狀態(tài)、記錄網(wǎng)絡(luò)請(qǐng)求并自動(dòng)顯示所有錯(cuò)誤。</p>

<p>現(xiàn)代化調(diào)試 Web 和移動(dòng)應(yīng)用程序的方式 - 開(kāi)始免費(fèi)監(jiān)控。</p>