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;

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

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>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More