position

Class Styles

Class	Styles
`static`	`position: static;`
`fixed`	`position: fixed;`
`absolute`	`position: absolute;`
`relative`	`position: relative;`
`sticky`	`position: sticky;`

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 工具类将元素相对于浏览器窗口进行定位：

滚动此元素以查看固定定位的效果

对于固定定位的元素，任何偏移是相对于视口计算的，该元素将作为绝对定位子元素的参考：

粘性定位元素

使用 sticky 工具类将元素定位为 relative，直到它跨越指定的阈值，然后将其视为 fixed，直到其父元素出屏幕外：

滚动此元素以查看粘性定位的效果

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie 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.

目录