位置

​基本用法(Basic usage)

​静态定位元素(Statically positioning elements)

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

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

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

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

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

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

任何偏移都是相对于最近的具有非 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.

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

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

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

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

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

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>

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

​断点和媒体查询

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

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

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