position

类名样式

类名	样式
`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>Static parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

对于静态定位的元素，任何偏移量都将被忽略，并且该元素不会充当绝对定位子元素的位置参考。

相对定位元素

使用 relative 实用工具根据文档的正常流定位元素

相对父元素

绝对定位子元素

<div class="relative ...">
  <p>Relative parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

对于相对定位的元素，任何偏移量都是相对于元素的正常位置计算的，并且该元素将充当绝对定位子元素的位置参考。

绝对定位元素

使用 absolute 实用工具将元素定位在文档正常流之外，导致相邻元素表现得好像该元素不存在一样

使用静态定位

相对父元素

静态父元素

静态子元素？

静态兄弟元素

使用绝对定位

相对父元素

静态父元素

绝对定位子元素

静态兄弟元素

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

对于绝对定位的元素，任何偏移量都是相对于最近的具有非 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>

对于粘性定位的元素，任何偏移量都是相对于元素的正常位置计算的，并且该元素将充当绝对定位子元素的位置参考。

响应式设计

前缀a position 实用工具使用像 md: 这样的断点变体，仅在以下情况下应用实用工具中等屏幕尺寸及以上

<div class="relative md:absolute ...">
  <!-- ... -->
</div>

了解更多关于在变体文档中使用变体的信息。

在此页上