布局
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:
滚动此元素以查看固定定位的实际操作
<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:
滚动此元素以查看粘性定位的实际操作
<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>
请参阅 变体文档 详细了解如何使用变体。