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>