位置

​基本用法

​静态定位元素

使用 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 将元素定位在文档的正常流之外，导致相邻元素的行为就像元素不存在一样。

任何 偏移 相对于具有除 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 相对于浏览器窗口定位元素。

任何 偏移 相对于视口计算，并且元素将充当绝对定位子级的定位参考。

联系人

Andrew Alfred

Debra Houston

简·怀特

雷·弗林特

明迪·阿尔布雷希特

大卫·阿诺德

<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，直到其父元素超出屏幕。

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

A

Andrew Alfred

艾莎·休斯顿

安娜·怀特

安迪·弗林特

B

鲍勃·阿尔弗雷德

比安卡·休斯顿

布里安娜·怀特

伯特·弗林特

C

科尔顿·阿尔弗雷德

辛西娅·休斯顿

夏安·怀特

查理·弗林特

<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 仅在悬停时应用 absolute 实用程序。

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

有关所有可用状态修饰符的完整列表，请查看 悬停、焦点和其它状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、更喜欢减少运动等。例如，使用 md:absolute 仅在中等屏幕尺寸及以上应用 absolute 实用程序。

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

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。