布局
用于控制元素在 DOM 中的定位方式的工具。
¥Basic usage
¥Statically positioning elements
使用 static
工具根据文档的正常流程定位元素。
¥Use the static
utility to position an element according to the normal flow of the document.
任何 offsets 都将被忽略,并且该元素不会充当绝对定位子元素的位置引用。
¥Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.
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
工具根据文档的正常流程定位元素。
¥Use the relative
utility to position an element according to the normal flow of the document.
任何 offsets 都是相对于元素的正常位置计算的,元素将作为绝对定位子元素的位置参考。
¥Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.
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
工具将元素定位在文档正常流之外,导致相邻元素表现得就像该元素不存在一样。
¥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.
任何 offsets 都是相对于位置不是 static
的最近父元素计算的,该元素将作为其他绝对定位子元素的位置参考。
¥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.
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>
¥Fixed positioning elements
使用 fixed
工具相对于浏览器窗口定位元素。
¥Use the fixed
utility to position an element relative to the browser window.
任何 offsets 都是相对于视口计算的,元素将作为绝对定位子元素的位置参考。
¥Any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.
<div class="relative">
<div class="fixed top-0 left-0 right-0">Contacts</div>
<div>
<div>
<img src="..." />
<strong>Andrew Alfred</strong>
</div>
<div>
<img src="..." />
<strong>Debra Houston</strong>
</div>
<!-- ... -->
</div>
</div>
¥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.
任何 offsets 都是相对于元素的正常位置计算的,元素将作为绝对定位子元素的位置参考。
¥Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.
<div>
<div>
<div class="sticky top-0 ...">A</div>
<div>
<div>
<img src="..." />
<strong>Andrew Alfred</strong>
</div>
<div>
<img src="..." />
<strong>Aisha Houston</strong>
</div>
<!-- ... -->
</div>
</div>
<div>
<div class="sticky top-0">B</div>
<div>
<div>
<img src="..." />
<strong>Bob Alfred</strong>
</div>
<!-- ... -->
</div>
</div>
<!-- ... -->
</div>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:absolute
to only apply the absolute
utility on hover.
<div class="relative hover:absolute">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:absolute
to apply the absolute
utility at only medium screen sizes and above.
<div class="relative md:absolute">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.