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.
<!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>
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