Estoy usando Tailwind CSS y quiero mostrar el menú desplegable blanco sobre el modal. Intenté usar z-index pero no puedo hacerlo funcionar.

¿Algunas ideas?

Este es mi código modal:

 <TransitionRoot as="template" :show="isOpen"> <Dialog as="div" class="inset-0 fixed overflow-y-auto"> <div class="flex min-h-screen text-center px-4 pt-4 pb-20 items-end justify-center sm:p-0 sm:block"> <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0"> <DialogOverlay class="bg-gray-975 bg-opacity-85 inset-0 transition-opacity fixed" /> </TransitionChild> <!-- This element is to trick the browser into centering the modal contents. --> <span class="hidden sm:h-screen sm:inline-block sm:align-middle" aria-hidden="true">&#8203;</span> <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="rounded-lg shadow-xl text-left transform transition-all text-gray-850 inline-block align-bottom overflow-hidden sm:max-w-lg sm:my-8 sm:w-full sm:align-middle dark:text-gray-200"> ... </div> </TransitionChild> </div> </Dialog>

Y este es mi código desplegable:

 <Listbox v-model="selectedPerson"> <div class="mt-1 relative z-50"> <ListboxButton class="bg-white rounded-lg cursor-default shadow-md text-left w-full py-2 pr-10 pl-3 relative sm:text-sm focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-white focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2"> <span class="block truncate">{{ selectedPerson.name }}</span> <span class="flex pr-2 inset-y-0 right-0 absolute items-center pointer-events-none"> <SelectorIcon class="h-5 text-gray-400 w-5" aria-hidden="true" /> </span> </ListboxButton> ... </div>