Position

Positioning lets elements step outside normal flow. Tailwind maps each position value to a utility and offsets to an inset scale that reuses the spacing system.

The Position Values

• static — default, ignores offsets.
• relative — stays in flow but becomes a positioning context for absolute children.
• absolute — removed from flow, positioned against the nearest positioned ancestor.
• fixed — positioned against the viewport, stays put on scroll.
• sticky — in flow until it hits a scroll threshold, then it pins.

Overlay Badge Pattern

The most common pairing is a relative parent with an absolute child:

<div class="relative inline-block">
  <img class="size-16 rounded-full" src="/avatar.jpg" alt="" />
  <span class="absolute top-0 right-0 size-3 rounded-full bg-green-500 ring-2 ring-white"></span>
</div>

The parent’s relative anchors the badge; top-0 right-0 pins it to the corner.

Inset and the Sticky Header

inset-0 is shorthand for setting all four offsets to zero — perfect for full-cover overlays. inset-x-0 does just the horizontal pair.

<!-- Full-cover scrim -->
<div class="absolute inset-0 bg-black/50"></div>

<!-- Header that pins to the top on scroll -->
<header class="sticky top-0 z-10 bg-white shadow-sm">Site nav</header>

sticky top-0 makes the header scroll normally until it reaches the top, then it stays; z-10 keeps it above the content it overlaps. To center an absolutely positioned element, either absolute inset-0 m-auto (with a known size) or the transform trick absolute left-1/2 -translate-x-1/2.