Part 11: Z-Index, Stacking Context & Inset Coordinates

Managing which elements appear on top of others is critical for modals, dropdowns, headers, and tooltips.

1. Inset Utilities (inset-*)

Instead of writing top-0 right-0 bottom-0 left-0, use inset-0: - inset-0: Stretches an absolute/fixed element across its entire container. - inset-x-0: left: 0; right: 0; - inset-y-0: top: 0; bottom: 0;

Full-Screen Backdrop:

<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"></div>

2. The z-index Scale

Tailwind provides standard z-index steps: - z-0 (0) - z-10 (10) - dropdowns, badges - z-20 (20) - sticky elements - z-30 (30) - fixed headers - z-40 (40) - slide-over drawers - z-50 (50) - modals, dialogs - z-auto (auto)

3. Negative Z-Index

Use -z-10 to place decorative background gradients behind text content:

<div class="relative p-10 overflow-hidden">
  <!-- Glowing background gradient blob -->
  <div class="absolute -top-10 -left-10 size-72 bg-purple-400 rounded-full blur-3xl opacity-30 -z-10"></div>
  <h1 class="text-4xl font-bold">Foreground Content</h1>
</div>

Key Takeaways

• Use inset-0 for full container stretches.
• Follow a consistent z-index scale (z-10 to z-50).
• Use negative z-index (-z-10) for ambient background lighting effects.

In Part 12, we will examine Overflow, Scrolling & Overscroll Behavior!