Layout
position
用于控制元素在文档中的定位方式。
| Class | Styles |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
示例
静态定位元素
使用 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>对于静态定位元素，任何 offsets 都会被忽略，并且该元素不会成为绝对定位子元素的参照。
相对定位元素
使用 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>对于相对定位元素，任何 offsets 将相对于元素的正常位置计算，并且该元素会成为绝对定位子元素的参照。
绝对定位元素
使用 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>对于绝对定位元素，任何 offsets 将相对于最近的非 static 祖先元素计算，并且该元素会成为其他绝对定位子元素的参照。
固定定位元素
使用 fixed 工具类让元素相对于浏览器窗口进行定位：
Scroll this element to see the fixed positioning in action
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 将相对于视口计算，并且该元素会成为绝对定位子元素的参照。
粘性定位元素
使用 sticky 工具类，在元素到达指定阈值前保持相对定位，到达后则表现为固定定位：
Scroll this element to see the sticky positioning in action
Andrew AlfredAisha HoustonAnna WhiteAndy FlintBob AlfredBianca HoustonBrianna WhiteBert FlintColton AlfredCynthia HoustonCheyenne WhiteCharlie 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 将相对于元素的正常位置计算，并且该元素会成为绝对定位子元素的参照。
响应式设计
Prefix a position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="relative md:absolute ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
