Position

Position utilities let you control how an element sits in the document flow. Tailwind covers every position type — static, relative, absolute, fixed, and sticky — with a clean, intuitive API.

Position types

<div class="static">Static — default, normal flow</div>
<div class="relative">Relative — offset from normal position</div>
<div class="absolute">Absolute — removed from flow</div>
<div class="fixed"&t;Fixed — fixed to viewport</div>
<div class="sticky">Sticky — sticks during scroll</div>
    

Positioning with inset

Use top, right, bottom, and left utilities to position elements.

<div class="relative">
  <div class="absolute top-0 right-0 bg-red-500 text-white p-1">
    Top-right corner
  </div>
</div>
    

Fixed header pattern

A fixed header stays at the top of the viewport as you scroll. It's one of the most common layout patterns.

<nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
  <div class="max-w-7xl mx-auto px-4 py-3">
    <span class="font-bold text-xl">MyApp</span>
  </div>
</nav>
<main class="pt-16">
  <p>Content goes here</p>
</main>
    

Sticky positioning

Sticky elements scroll normally until they reach a threshold, then stick in place. Perfect for section headings in long documents.

<div class="sticky top-0 bg-gray-100 p-2 font-semibold">
  I stick when you scroll past me
</div>