Layout

Position

Utilities for controlling how an element is positioned in the DOM.

Quick reference

Class	Description
static	position: static
fixed	position: fixed
absolute	position: absolute
relative	position: relative
sticky	position: sticky

Basic usage

Statically positioning elements

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

Static parent

Absolute child

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

Relatively positioning elements

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

Relative parent

Absolute child

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

Absolutely positioning elements

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

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.

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

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

Imaginary browser window

Warp Scientists

• 
  Justina Matter

  Warp Scientist
• 
  Narve Hoops

  Warp Scientist
• 
  Dagny Calamity

  Warp Scientist
• 
  Joar Quack

  Warp Scientist

<div>
  <h4 class="fixed top-0 left-0 right-0">Warp Scientists</h4>
  <ul>
    <li>
      <img src="..." />
      <div>Justina Matter</div>
    </li>
    <li>
      <img src="..." />
      <div>Narve Hoops</div>
    </li>
    <!-- ... -->
  </ul>
</div>

Sticky positioning elements

Use sticky 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 - Warp Scientists

• Ainsley Matter
• Alarik Hoops
• Ambrose Calamity
• Anders Quack

B - Warp Scientists

• Bella Matter
• Brayden Hoops
• Bailey Calamity
• Bentley Quack

C - Warp Scientists

• Charlotte Matter
• Carter Hoops
• Claire Calamity
• Cora Quack

<div>
  <div>
    <h4 class="sticky top-0 left-0 right-0 ...">A - Warp Scientists</h4>
    <ul>
      <li>
        <img src="..." />
        <strong>Ainsley Matter</strong>
      </li>
      <li>
        <img src="..." />
        <strong>Alarik Hoops</strong>
      </li>
      <!-- ... -->
    </ul>
  </div>
  <div>
    <h4 class="sticky top-0 left-0 right-0 ...">B - Warp Scientists</h4>
    <ul>
      <li>
        <img src="..." />
        <strong>Bella Matter</strong>
      </li>
      <!-- ... -->
    </ul>
  </div>
  <!-- ... -->
</div>

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:absolute to apply the absolute utility at only medium screen sizes and above.

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