I have the following simple setup:
<!-- Setup -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
<!-- Modal -->
<div class="h-screen w-screen grid place-content-center bg-indigo-600">
<button class="btn btn-secondary" onclick="modal.showModal()">open modal</button>
</div>
<dialog id="modal" class="modal">
<div class="modal-box">
<!-- Datepicker -->
<input datepicker datepicker-autohide type="text" class="border rounded z-50 w-full" placeholder="Select date" style="z-index: 10000!important">
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
The issue is, that the datepicker is behind the backdrop and whatever I try with z-index and relative positions, it always stays behind the backdrop.