Positioning & Z-Index

Positioning utilities in Tailwind control how elements sit in the document flow (relative, absolute, fixed, sticky), where they anchor using directional offsets (top-0, inset-0), and how they stack along the Z-axis (z-10, z-50).

By placing relative on a parent container, you establish a coordinate anchor. Any child with absolute detaches from standard document flow and positions itself relative to that parent container boundary.

Z-index utilities (z-0 through z-50) dictate which element renders on top when elements overlap, preventing dropdown menus or modal backdrops from hiding behind card content.

Modern component patterns rely heavily on positioning utilities:

1. **Notification Badges**: Pin an unread indicator dot to the top-right corner of an avatar (absolute -top-1 -right-1).

2. **Modal Backdrops**: Stretch a semi-transparent dark overlay across the viewport (fixed inset-0 z-50).

3. **Sticky Headers**: Keep a navigation bar locked to the top of the screen during scroll (sticky top-0 z-40).

Structuring layered elements follows three steps:

1. **Set Container Anchor**: Apply relative to the wrapper card element so absolute children measure offsets from the card edges.

2. **Position Child Layer**: Apply absolute to the overlay element. Use inset-0 to cover the entire card, or top-2 right-2 to pin a badge to the top-right corner.

3. **Manage Stacking Order**: Apply z-10 or z-20 to guarantee the interactive badge or overlay floats above card images and text.