Z-Index & Stacking

Control the stacking order of overlapping elements

Z-index controls which elements appear on top when they overlap. Higher values stack above lower ones.

Click a box to change its z-index

Box 1:z-10

Box 2:z-20

Box 3:z-30

Box 4:z-40

Tailwind CSS

<div class="relative">
  <div class="z-10 absolute ...">Box 1</div>
  <div class="z-20 absolute ...">Box 2</div>
  <div class="z-30 absolute ...">Box 3</div>
  <div class="z-40 absolute ...">Box 4</div>
</div>

11 / 23