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
<!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:
How to make Div on Top of Another in Tailwind CSS ?
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