1. 布局
  2. position

布局

position

用于控制元素在文档中的位置的工具。

样式
static
position: static;
fixed
position: fixed;
absolute
position: absolute;
relative
position: relative;
sticky
position: sticky;

示例(Examples)

¥Examples

静态定位元素(Statically positioning elements)

¥Statically positioning elements

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

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

Static parent

Absolute child

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

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

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

¥Relatively positioning elements

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

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

Relative parent

Absolute child

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

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

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

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

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>

对于绝对定位的元素,任何 offsets 都是相对于具有除 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 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>

对于固定定位元素,任何 offsets 都是相对于视口计算的,并且该元素将作为绝对定位子元素的位置参考:

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

对于粘性定位元素,任何 offsets 都是相对于元素的正常位置计算的,并且该元素将作为绝对定位子元素的位置参考。

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

¥Responsive design

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

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

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号