position

position

用於控制元素在文件中如何定位的通用類別。

Class Styles

Class	Styles
`static`	`position: static;`
`fixed`	`position: fixed;`
`absolute`	`position: absolute;`
`relative`	`position: relative;`
`sticky`	`position: sticky;`

static

position: static;

fixed

position: fixed;

absolute

position: absolute;

relative

position: relative;

sticky

position: sticky;

範例（Examples）

靜態定位元素（Statically positioning elements）

使用 static 通用類別根據文件的正常流程定位元素：

Static parent

Absolute child

<div class="static ...">  <p>Static parent</p>  <div class="absolute bottom-0 left-0 ...">    <p>Absolute child</p>  </div></div>

對於靜態定位的元素，任何偏移都會被忽略，且該元素不會作為絕對定位子元素的位置參考。

相對定位元素（Relatively positioning elements）

使用 relative 通用類別根據文件的正常流程定位元素：

Relative parent

Absolute child

<div class="relative ...">  <p>Relative parent</p>  <div class="absolute bottom-0 left-0 ...">    <p>Absolute child</p>  </div></div>

對於相對定位的元素，任何偏移都是相對於元素的正常位置計算，且該元素會作為絕對定位子元素的位置參考。

絕對定位元素（Absolutely positioning elements）

使用 absolute 通用類別將元素定位在文件正常流程_之外_，使相鄰元素表現得好像該元素不存在：

With static positioning

Relative parent

Static parent

Static child?

Static sibling

With absolute positioning

Relative parent

Static parent

Absolute child

Static sibling

<div class="static ...">  <!-- Static parent -->  <div class="static ..."><p>Static child</p></div>  <div class="inline-block ..."><p>Static sibling</p></div>  <!-- Static parent -->  <div class="absolute ..."><p>Absolute child</p></div>  <div class="inline-block ..."><p>Static sibling</p></div></div>

對於絕對定位的元素，任何偏移都是相對於最近的非 static 定位父元素計算，且該元素會作為其他絕對定位子元素的位置參考。

固定定位元素（Fixed positioning elements）

使用 fixed 通用類別相對於瀏覽器視窗定位元素：

捲動此元素以查看固定定位的效果

對於固定定位的元素，任何偏移都是相對於視窗計算，且該元素會作為絕對定位子元素的位置參考：

黏性定位元素（Sticky positioning elements）

使用 sticky 通用類別將元素定位為 relative，直到它超過指定的閾值，然後將其視為 fixed，直到其父元素離開螢幕：

捲動此元素以查看黏性定位的效果

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<div>  <div>    <div class="sticky top-0 ...">A</div>    <div>      <div>        <img src="/img/andrew.jpg" />        <strong>Andrew Alfred</strong>      </div>      <div>        <img src="/img/aisha.jpg" />        <strong>Aisha Houston</strong>      </div>      <!-- ... -->    </div>  </div>  <div>    <div class="sticky top-0">B</div>    <div>      <div>        <img src="/img/bob.jpg" />        <strong>Bob Alfred</strong>      </div>      <!-- ... -->    </div>  </div>  <!-- ... --></div>

對於黏性定位的元素，任何偏移都是相對於元素的正常位置計算，且該元素會作為絕對定位子元素的位置參考。

響應式設計（Responsive design）

在 position 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="relative md:absolute ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。

On this page