在 GitHub 上檢視
位置
使用這些簡寫工具程式,可快速設定元素的位置。
常見值
提供快速定位類別,但它們沒有回應式功能。
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
固定頂端
將元素定位在視窗頂端,從邊緣到邊緣。請務必了解 fixed position 在專案中的影響;您可能需要新增其他 CSS。
<div class="fixed-top">...</div>
固定底部
將元素定位在視窗底部,從邊緣到邊緣。請務必了解 fixed position 在專案中的影響;您可能需要新增其他 CSS。
<div class="fixed-bottom">...</div>
黏貼頂端
將元素定位在視窗頂端,從邊緣到邊緣,但僅在您捲動瀏覽過該元素後才定位。.sticky-top
工具程式使用 CSS 的 position: sticky
,並非所有瀏覽器都完全支援。
IE11 和 IE10 會將 position: sticky
呈現為 position: relative
。因此,我們將樣式包覆在 @supports
查詢中,僅將黏貼性限制在可以正確呈現的瀏覽器中。
<div class="sticky-top">...</div>