布局
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>对于静态定位的元素，任何偏移量都会被忽略，且该元素不会作为绝对定位子元素的定位参考。
相对定位元素
使用 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>对于相对定位的元素，任何偏移量都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的定位参考。
绝对定位元素
使用 absolute 工具类将元素定位在文档流之外，使相邻元素表现得像该元素不存在一样：
静态定位
相对定位父元素
静态父元素
静态子元素？
静态兄弟元素
绝对定位
相对定位父元素
静态父元素
绝对定位子元素
静态兄弟元素
<div class="static ..."> <!-- 静态父元素 --> <div class="static ..."><p>静态子元素</p></div> <div class="inline-block ..."><p>静态兄弟元素</p></div> <!-- 静态父元素 --> <div class="absolute ..."><p>绝对定位子元素</p></div> <div class="inline-block ..."><p>静态兄弟元素</p></div></div>对于绝对定位元素，任何偏移量都是相对于最近的具有非 static 定位的父元素计算的，该元素将作为其他绝对定位子元素的定位参考。
固定定位元素
使用 fixed 工具类将元素相对于浏览器窗口进行定位：
滚动此元素查看固定定位效果
Andrew Alfred
Debra Houston
Jane White
Ray Flint
Mindy Albrect
David Arnold<div class="relative"> <div class="fixed top-0 right-0 left-0">联系人</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>对于固定定位的元素，所有偏移量都是相对于视口计算的，并且该元素将作为绝对定位子元素的定位参考：
粘性定位元素
使用 sticky 工具类可以将元素定位为 relative，直到它越过指定阈值，然后将其视为 fixed 定位，直到其父元素离开屏幕：
滚动此元素查看粘性定位效果
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>对于粘性定位元素，任何偏移量都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的定位参考。
响应式设计
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.