Position Utilities in Tailwind

Tailwind maps CSS position values to simple classes. Offsets (top, right, bottom, left) and the shorthand inset work the same as native CSS but through utilities.

Relative and absolute

<div class="relative inline-flex">
  <button class="p-3 bg-gray-100 rounded-lg">Bell</button>
  <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full
    text-white text-xs flex items-center justify-center">3</span>
</div>

Fixed positioning

<header class="fixed top-0 left-0 right-0 z-50 bg-white border-b">
  <nav class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
    ...
  </nav>
</header>
<main class="pt-16">...</main>

Sticky elements

<aside class="sticky top-4 h-fit">
  Table of contents
</aside>

Inset shorthand

<div class="absolute inset-0 bg-black/50"></div>
<div class="absolute inset-x-0 bottom-0">Bottom bar</div>

Z-index utilities scale: z-0, z-10, z-20, z-30, z-40, z-50. Use z-auto to reset.