位置

​基础用法

​静态定位元素

使用 static 实用程序根据文档的正常流程定位元素。

任何 offsets 都将被忽略，并且该元素将不会作为绝对定位子元素的位置参考。

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

​相对定位元素

使用 relative 实用程序根据文档的正常流程定位元素。

任何 offsets 都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的位置参考。

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

​绝对定位元素

使用 absolute 实用程序将元素定位在文档正常流的之外，使得相邻元素表现得好像该元素不存在一样。

任何 offsets 都是相对于位置除 static 之外的最近的父级进行计算的，并且该元素将作为其他绝对定位子级的位置参考。

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

​固定定位元素

使用 fixed 实用程序来相对于浏览器窗口定位元素。

任何 offsets 都是相对于视口计算的，并且该元素将作为绝对定位子元素的位置参考。

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div class="relative">
  <div class="fixed top-0 left-0 right-0">Contacts</div>
  <div>
    <div>
      <img src="..." />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="..." />
      <strong>Debra Houston</strong>
    </div>
    <!-- ... -->
  </div>
</div>

​粘性定位元素

使用 sticky 实用程序将元素定位为 relative 直到它超过指定的阈值，然后将其视为 fixed 直到其父元素离开屏幕。

任何 offsets 都是相对于元素的正常位置计算的，并且该元素将作为绝对定位子元素的位置参考。

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<div>
  <div>
    <div class="sticky top-0 ...">A</div>
    <div>
      <div>
        <img src="..." />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="..." />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        <img src="..." />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:absolute 来仅 在 hover应用 absolute.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:absolute 来应用 absolute 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.