Z-index controls the stacking order of positioned elements. When elements overlap, higher z-index values sit on top of lower ones. Tailwind provides a simple scale for managing layering.
Z-index scale
<div class="z-0">Base layer</div>
<div class="z-10">Above base</div>
<div class="z-20">Above z-10</div>
<div class="z-30">Above z-20</div>
<div class="z-40">Above z-30</div>
<div class="z-50">Highest default layer</div>
<div class="z-auto">Auto — browser default</div>
Stacking context
Z-index only works on positioned elements (relative, absolute, fixed, or sticky). An element with z-50 but no position set won't stack properly. Make sure the element has a position utility applied.
<div class="relative z-10">This stacks above z-0 elements</div>
<div class="fixed z-50">This sits on top of everything</div>
Common patterns
Modals and dropdowns typically use z-50 or higher. Fixed navigation uses z-40. Tooltips and popovers use z-50. Backdrops and overlays use z-40.
<!-- Modal overlay -->
<div class="fixed inset-0 bg-black/50 z-40"></div>
<!-- Modal content -->
<div class="fixed inset-0 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-8 shadow-xl">
Modal content here
</div>
</div>