How to make Div on Top of Another in Tailwind CSS ?

Last Updated : 16 Apr, 2024

Positioning elements in Tailwind CSS allows for creating complex layouts with ease. One common requirement is overlaying one div on top of another.

Below are the approaches to make div on top of another in Tailwind CSS:

Table of Content

Absolute Positioning and Z-index
Tailwind CSS Utility Classes for Absolute Positioning

Absolute Positioning and Z-index

This approach involves positioning the overlay div absolutely within the parent div and adjusting the z-index to ensure it appears on top. Overlay a semi-transparent background on a parent div using absolute positioning and z-index manipulation.

Example: The below example makes Div on top of another in Tailwind CSS using Absolute Positioning and Z-index

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Overlay Example</title>
    <!-- Include Tailwind CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>

    <div class="relative h-64 bg-gradient-to-r
                from-blue-400 to-purple-500">
        <!-- Overlay -->
        <div class="absolute inset-0 
                    bg-gray-800 opacity-50 
                    z-10">
        </div>

        <!-- Content to overlay -->
        <div class="absolute inset-0 flex 
                    items-center justify-center
                    text-white z-20">
            <div class="bg-gray-800 p-8 
                        rounded-lg shadow-lg">
                <h1 class="text-3xl font-bold mb-4">
                    Welcome to Our Website
                </h1>
                <p class="text-lg">
                    Thanks for visiting! This 
                      is the overlay content.
                </p>
            </div>
        </div>
    </div>

</body>

</html>

Output:

Screenshot-2024-04-08-163016

Tailwind CSS Utility Classes for Absolute Positioning

This approach utilizes Tailwind CSS utility classes for absolute positioning, providing a concise and readable solution. The overlay is a semi-transparent dark layer positioned over the background, and the content is centered on top of it. The content includes a title and a paragraph, styled with white text and a subtle shadow effect.

Example: The below example makes Div on top of another in Tailwind CSS using Utility Classes for Absolute Positioning.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Overlay Example</title>
    <!-- Include Tailwind CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>

    <div class="relative h-64 bg-gradient-to-r
                from-yellow-400 to-orange-500">
        <!-- Overlay -->
        <div class="absolute inset-0 
                    bg-gray-900 opacity-60">
        </div>

        <!-- Content to overlay -->
        <div class="absolute inset-0 flex 
                    items-center justify-center
                    text-white">
            <div class="bg-transparent p-8 rounded-lg
                        border-2 border-white shadow-lg">
                <h1 class="text-3xl font-bold mb-4">
                    Welcome to Our Website
                </h1>
                <p class="text-lg">
                    Thanks for visiting! This is the
                    overlay content with a different
                    approach.
                </p>
            </div>
        </div>
    </div>

</body>

</html>