位置

​基本用法

¥Basic usage

​静态定位元素

¥Statically positioning elements

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

¥Use the static utility to position an element according to the normal flow of the document.

任何 offsets 都将被忽略，并且该元素不会充当绝对定位子元素的位置引用。

¥Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.

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

​相对定位元素

¥Relatively positioning elements

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

¥Use the relative utility to position an element according to the normal flow of the document.

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

¥Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

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

​绝对定位元素

¥Absolutely positioning elements

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

¥Use the absolute utility to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

任何 offsets 都是相对于位置不是 static 的最近父元素计算的，该元素将作为其他绝对定位子元素的位置参考。

¥Any offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.

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

使用 fixed 工具相对于浏览器窗口定位元素。

¥Use the fixed utility to position an element relative to the browser window.

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

¥Any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.

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

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

¥Use the sticky utility to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

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

¥Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

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

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:absolute 仅在中等屏幕尺寸及以上时应用 absolute 工具。

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

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