布局
定位
用于控制元素在文档中如何定位的工具类。
| 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>对于绝对定位的元素，任何偏移量都是相对于最近的非 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.