Lzh on GitHub

position

控制元素在文档中如何定位的实用工具。

快速参考

类样式
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

示例

静态定位元素

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

Static parent

Absolute child

<div class="static ...">
  <p>静态父元素</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>绝对定位子元素</p>
  </div>
</div>

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

相对定位元素

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

Relative parent

Absolute child

<div class="relative ...">
  <p>相对父元素</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>绝对定位子元素</p>
  </div>
</div>

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

绝对定位元素

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

With static positioning

Relative parent

Static parent

Static child?

Static sibling

With absolute positioning

Relative parent

Static parent

Absolute child

Static sibling

<div class="static ...">
  <div class="static ..."><p>静态子元素</p></div>
  <div class="inline-block ..."><p>静态兄弟元素</p></div>
  <div class="absolute ..."><p>绝对定位子元素</p></div>
  <div class="inline-block ..."><p>静态兄弟元素</p></div>
</div>

对于绝对定位的元素，任何 偏移量 都是相对于最近的具有非 static 定位的父元素计算的，并且该元素将充当其他绝对定位子元素的定位参考。

固定定位元素

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

滚动此元素以查看固定定位的效果

Contacts
Andrew Alfred
Debra Houston
Jane White
Ray Flint
Mindy Albrect
David Arnold 
<div class="relative">
  <div class="fixed top-0 right-0 left-0">联系人</div>
  <div>
    <div>
      <img src="/img/andrew.jpg" />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="/img/debra.jpg" />
      <strong>Debra Houston</strong>
    </div>
    
  </div>
</div>

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

粘性定位元素

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

滚动此元素以查看粘性定位的效果

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="/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>

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

响应式设计

使用断点变体（例如 md:）作为 position 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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