How to show a dropdown over a modal using tailwind css?
How to show a dropdown over a modal using tailwind css?
1 answer
by
cali_green ,
3 months ago
@dedrick
To show a dropdown over a modal using Tailwind CSS, you can adjust the z-index of the dropdown so that it appears above the modal. Here is an example of how you can achieve this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- Modal -->
<div class="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center">
<!-- Content inside the modal -->
</div>
<!-- Dropdown -->
<div class="absolute top-0 right-0 mt-12">
<div class="relative">
<button class="px-4 py-2 bg-gray-800 text-white">Dropdown</button>
<div class="absolute right-0 mt-1 w-32 bg-white border border-gray-200 z-10">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 1</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 2</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Option 3</a>
</div>
</div>
</div>
|
In this example, the modal has a z-index of 50 by default, so to make the dropdown appear above the modal, we have assigned a z-index of 10 to the dropdown. This ensures that the dropdown is displayed over the modal. You can adjust the z-index value of the dropdown as needed to achieve the desired result.