position

示例(Examples)

静态定位元素(Statically positioning elements)

使用 static 工具根据文档的正常流来定位元素：

🌐 Use the static utility to position an element according to the normal flow of the document:

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

对于静态定位的元素，任何偏移都会被忽略，并且该元素不会作为绝对定位子元素的位置参考。

🌐 With statically positioned elements, any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.

相对定位元素(Relatively positioning elements)

使用 relative 工具根据文档的正常流来定位元素：

🌐 Use the relative utility to position an element according to the normal flow of the document:

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

对于相对定位的元素，任何偏移量都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的位置参考。

🌐 With relatively position elements, any offsets are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.

绝对定位元素(Absolutely positioning elements)

使用 absolute 工具将元素定位在文档的正常流之外，使相邻元素表现得好像该元素不存在一样：

🌐 Use the absolute utility to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist:

<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 定位的父元素计算的，并且该元素将作为其他绝对定位子元素的位置参考。

🌐 With absolutely positioned elements, any offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.

固定定位元素(Fixed positioning elements)

使用 fixed 工具将元素相对于浏览器窗口定位：

🌐 Use the fixed utility to position an element relative to the browser window:

滚动此元素以查看固定定位的效果

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div class="relative">  <div class="fixed top-0 right-0 left-0">Contacts</div>  <div>    <div>      <img src="/img/andrew.jpg" />      <strong>Andrew Alfred</strong>    </div>    <div>      <img src="/img/debra.jpg" />      <strong>Debra Houston</strong>    </div>    <!-- ... -->  </div></div>

对于固定定位元素，任何偏移量都是相对于视口计算的，并且该元素将作为绝对定位子元素的位置参考：

🌐 With fixed positioned elements, any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children:

粘性定位元素(Sticky positioning elements)

使用 sticky 工具将元素定位为 relative，直到它超过指定阈值，然后将其视为 fixed，直到其父元素离开屏幕:

🌐 Use the sticky utility to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen:

滚动此元素以查看粘性定位的效果

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

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>

对于使用 sticky 定位的元素，任何 偏移量 都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的定位参考。

🌐 With sticky positioned elements, any offsets are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.

响应式设计(Responsive design)

在 position 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。