布局
控制元素在文档中位置的工具。
| Class | Styles |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
使用 static 工具根据文档的正常流动来定位元素：
静态父元素
绝对子元素
<div class="static ..."> <p>静态父元素</p> <div class="absolute bottom-0 left-0 ..."> <p>绝对子元素</p> </div></div>在静态定位的元素中，任何 偏移 将被忽略，该元素不会作为绝对定位子元素的参考位置。
使用 relative 工具根据文档的正常流动来定位元素：
相对父元素
绝对子元素
<div class="relative ..."> <p>相对父元素</p> <div class="absolute bottom-0 left-0 ..."> <p>绝对子元素</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>在绝对定位的元素中，任何 偏移 是相对于最近的非静态父元素来计算的，该元素将作为其他绝对定位子元素的参考位置。
使用 fixed 工具将元素相对于浏览器窗口定位：
向下滚动以查看固定定位的效果
<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></div>在固定定位的元素中，任何 偏移 是相对于视口计算的，该元素将作为绝对定位子元素的参考位置。
使用 sticky 工具将元素定位为 relative 直到它超过指定的阈值，然后将其视为 fixed，直到其父元素离开屏幕：
向下滚动以查看粘性定位的效果
<div> <div> <div class="sticky top-0 ...">A</div> <div> <div> <img src="/img/andrew.jpg" /> <strong>Andrew 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.