使用這些簡寫工具程式,可快速設定元素的位置。

常見值

提供快速定位類別,但它們沒有回應式功能。

<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>