Tailwind Position Utilities

What Are Position Utilities?

Tailwind's position utilities map to the CSS position property: static, relative, absolute, fixed, and sticky. They're almost always paired with offset utilities like top-0, right-4, or inset-0 to place the element precisely.

Positioning is foundational for overlays, badges, sticky headers, and modals, patterns you'll build repeatedly once you understand how relative and absolute work together.

<div class="relative h-40 w-40 bg-slate-100">
  <span class="absolute top-2 right-2 rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
    New
  </span>
</div>

The badge is absolute, positioned relative to its nearest relative ancestor, the outer box, not the page.

Position and Offset Syntax

class="relative | absolute | fixed | sticky"
class="top-0 right-0 bottom-0 left-0"
class="inset-0 | inset-x-0 | inset-y-0"

• relative establishes a positioning context for absolutely positioned children without moving itself.
• absolute removes the element from normal flow and positions it relative to the nearest relative/absolute/fixed ancestor.
• fixed positions relative to the browser viewport, staying in place while scrolling.
• sticky behaves like relative until a scroll threshold, then sticks like fixed within its parent.
• inset-0 is shorthand for top-0 right-0 bottom-0 left-0 applied together.

Position Utilities Cheatsheet

The five position values and the offset classes used to place elements.

The relative + absolute Pairing

The most important positioning pattern in Tailwind is pairing a relative parent with one or more absolute children. The parent creates the coordinate system; the children are placed using top, right, bottom, left, or inset utilities relative to it.

<div class="relative">
  <img src="/card.jpg" class="w-full rounded-lg" alt="Product" />
  <span class="absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs text-white">
    Sale
  </span>
</div>

fixed vs sticky

fixed always positions relative to the viewport and stays visible regardless of scroll position or its parent's boundaries. sticky positions relative to its nearest scrolling ancestor and only "sticks" once its offset threshold is reached, then unsticks once its parent scrolls out of view.

<!-- Always visible fixed button -->
<button class="fixed bottom-6 right-6 rounded-full bg-blue-600 p-4 text-white shadow-lg">
  ↑
</button>

<!-- Sticky section header -->
<h2 class="sticky top-0 bg-white py-2 text-lg font-semibold">
  Section Title
</h2>

The sticky header stays pinned to the top while its section scrolls, then scrolls away with the next section.

Building a Full-Screen Overlay

fixed inset-0 is the standard Tailwind pattern for a full-screen modal backdrop, since inset-0 stretches the element to all four edges of the viewport.

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="rounded-lg bg-white p-6 shadow-xl">
    Modal content
  </div>
</div>

Common Mistakes

• Using absolute without a positioned (relative, absolute, or fixed) ancestor, causing the element to position relative to the entire page instead.
• Forgetting overflow-hidden on a relative parent when an absolutely positioned child should be clipped to its bounds.
• Using fixed when sticky was actually the desired scrolling behavior, or vice versa.
• Not setting a z-index on overlapping positioned elements, leading to unpredictable stacking order.
• Applying sticky to an element whose parent has overflow: hidden or overflow: auto, which silently breaks sticky positioning.

Key Takeaways

• Tailwind's position utilities map to the five CSS position values: static, relative, absolute, fixed, and sticky.
• relative + absolute is the standard pairing for badges, tooltips, and overlays.
• fixed positions relative to the viewport; sticky positions relative to the nearest scroll container.
• inset-0 is shorthand for setting all four offset properties to zero at once.
• Positioning issues are often caused by a missing relative ancestor or a parent with clipped overflow.