How can I overlap two divs using Tailwind’s position classes?
Asked on Sep 10, 2025
Answer
To overlap two divs using Tailwind's position classes, you can utilize the `absolute` and `relative` positioning utilities. By setting one div to `relative` and the other to `absolute`, you can control their overlap.
<!-- BEGIN COPY / PASTE -->
<div class="relative">
<div class="absolute top-0 left-0 bg-blue-500 w-32 h-32"></div>
<div class="absolute top-4 left-4 bg-red-500 w-32 h-32"></div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The outer div is set to `relative` to establish a positioning context.
- The inner divs are set to `absolute` to position them relative to the outer div.
- Adjust `top`, `left`, `right`, `bottom` classes to control the overlap amount and direction.
- Use Tailwind's color and size utilities to differentiate the overlapping divs visually.
Recommended Links: