LEARN

Tailwind CSS Z-Index

Utilities for controlling the stack order of an element.

In Tailwind CSS, the z-index utilities allow you to control the stacking order of elements along the z-axis. This is crucial for managing how elements overlap and appear on the screen, especially in complex layouts and designs.

Utilitiy classes in Tailwind css

This classes are predefine by tailwind css you can easily use this class in element

Class

Properties

  • z-0

    z-index: 0;

  • z-10

    z-index: 10;

  • z-20

    z-index: 20;

  • z-30

    z-index: 30;

  • z-40

    z-index: 40;

  • z-50

    z-index: 50;

  • z-auto

    z-index: auto;

  • -z-0

    z-index: -0;

  • -z-10

    z-index: -10;

  • -z-20

    z-index: -20;

  • -z-30

    z-index: -30;

  • -z-40

    z-index: -40;

  • -z-50

    z-index: -50;

Default z-index

To place elements on top of others, use the .z-{value} class.

z-50

z-40

z-30

z-20

z-10

z-0

 <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 z-50"> z-50</p>
      <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 -translate-x-8 z-40"> z-40</p>
      <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 -translate-x-16 z-30"> z-30</p>
      <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 -translate-x-24 z-20"> z-20</p>
      <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 -translate-x-32 z-10"> z-10</p>
      <p class="w-24 h-24 rounded-full border border-white bg-indigo-600 flex items-center justify-center text-white text-base font-medium relative shadow-md shadow-black/45 -translate-x-40 z-0"> z-0</p>

Other example

z-10
z-20
z-30 
 <div class="w-28 h-28 rounded-xl bg-indigo-500 absolute z-10 top-0 left-0 flex items-center justify-center text-white text-base font-medium">z-10 </div>
      <div class="w-28 h-28 rounded-xl bg-orange-500 absolute z-20 top-16 left-16 flex items-center justify-center text-white text-base font-medium">z-20 </div>
      <div class="w-28 h-28 rounded-xl bg-emerald-500 absolute z-30 top-32 left-32 flex items-center justify-center text-white text-base font-medium">z-30 </div>