Template listing hero section background

Z-index Property in Tailwind CSS

Z-index property in Tailwind CSS blog | Published on : 28th August, 2023

Web design is an art that goes beyond arranging elements on a screen; it's about creating depth, hierarchy, and visual harmony. One powerful tool that empowers designers to achieve these goals is the z-index property. And when it comes to implementing this property seamlessly, Tailwind CSS emerges as a remarkable choice. In this blog post, we'll explore the z-index property within the context of Tailwind CSS and see how it can transform your web design approach.

Understanding Z-Index in Tailwind CSS:

The z-index property is a fundamental concept in web design that controls the stacking order of elements on a webpage. Elements with higher z-index values are positioned above those with lower values. This property is pivotal for creating layered designs and managing how different elements interact visually.

Usage of Z-Index in Tailwind CSS:

1. Using Tailwind CSS Z-Index Utility Classes:

Tailwind CSS provides utility classes to explicitly set the z-index value of an element. For example, you can use classes like z-10, z-20, and so on to set the stacking order of elements. This is useful when you need precise control over the stacking of elements.

   <div class="relative">
          <div class="z-40 absolute top-1 left-3 border-white border-2 flex h-20 w-20 items-center justify-center rounded-full bg-blue-500">
            z-40
          </div>
          <div class="... z-30 absolute top-1 left-[72px] border-white border-2 flex h-20 w-20 items-center justify-center rounded-full bg-blue-500">
            z-30
          </div>
          <div class="... z-20 absolute top-1 left-[134px] border-white border-2  flex h-20 w-20 items-center justify-center rounded-full bg-blue-500">
            z-20
          </div>
          <div class="... z-10 absolute top-1 left-[194px] border-white border-2  flex h-20 w-20 items-center justify-center rounded-full bg-blue-500">
            z-10
          </div>
          <div class="... z-0 absolute top-1 left-[2024px] border-white border-2  flex h-20 w-20 items-center justify-center rounded-full bg-blue-500">
            z-0
          </div>
        </div>

Tailwind CSS Z-Index Classes

2. Sticky Elements:

When working with sticky elements, such as navigation bars, you can use the z-sticky class to automatically apply the correct z-index value. This ensures that the sticky element remains on top of other content as the user scrolls.

Sticky Elements Order with Z-Index

For above example You can explore InfyNFT Template here.

3. Modal Overlays:

Modal overlays are a common UI component. You can use Tailwind CSS to create modals that overlay the rest of the content by setting a high z-index value like z-50 or z-60 for the modal and its backdrop. This prevents underlying content from interfering with the modal's functionality

import { useState } from "react";

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center z-50">
      <div className="bg-white w-1/4 p-6 rounded shadow-2xl">
        <h2 className="text-lg font-semibold mb-4">Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button
          className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          onClick={onClose}
        >
          Close
        </button>
      </div>
    </div>
  );
};

function Sample3() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="bg-gray-300 flex items-center justify-center">
      <div className="min-h-screen flex items-center justify-center">
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          onClick={openModal}
        >
          Open Modal
        </button>
        <Modal isOpen={isModalOpen} onClose={closeModal} />
      </div>
    </div>
  );
}

export default Sample3;

Responsive Layering

Customizing z-index Values:

Tailwind CSS allows you to customize the default z-index values or add your own custom z-index values in the configuration file (tailwind.config.js). You can modify the gap key under the theme section to define your preferred z-index values. For example

module.exports = {
  theme: {
    zIndex: {
     '110':110
    },
  },
  variants: {},
  plugins: [],
};
Read More:
  1. Tailwind CSS GAP Tutorial
  2. Exploring Tailwind CSS Border Width: Tips and Examples
  3. A Deep Dive into Tailwind CSS Border Colors: Tips and Examples
Colorfull background image for highlight footer
TailwindTap
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap's free open-source pre-made components and templates.

Hire Tailwind CSS Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram