Part 10: Positioning: Static, Relative, Absolute, Fixed & Sticky

Positioning allows you to remove elements from normal document flow and place them precisely where needed.

1. The Five Position Utilities

• static: Default normal document flow.
• relative: Element remains in flow, but creates a positioning context for absolute children.
• absolute: Removed from flow, positioned relative to nearest positioned ancestor.
• fixed: Positioned relative to the browser viewport; stays in place during scroll.
• sticky: Behaves like relative until a scroll threshold is met, then acts like fixed.

2. Common Pattern: Notification Badge

Combining relative on the container with absolute on the badge:

<button class="relative p-3 bg-slate-200 rounded-full hover:bg-slate-300">
  <!-- Bell Icon -->
  <svg class="size-6 text-slate-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
  </svg>

  <!-- Absolute Notification Badge -->
  <span class="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
    3
  </span>
</button>

3. Sticky Navigation Header

<header class="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-slate-200 p-4">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <span class="font-bold text-lg">Devify</span>
    <nav class="space-x-4">
      <a href="#">Docs</a>
      <a href="#">Tutorials</a>
    </nav>
  </div>
</header>

Key Takeaways

• Establish anchor containers using relative.
• Position overlays, badges, and tooltips using absolute top-* right-*.
• Build headers that stay visible when scrolling using sticky top-0.

In Part 11, we will cover Z-Index, Stacking Contexts & Inset Coordinates!