如何使用 Tailwind CSS 在模态框上显示下拉菜单答案

【问题标题】：How to show a dropdown over a modal using Tailwind CSS如何使用 Tailwind CSS 在模态框上显示下拉菜单
【发布时间】：2022-01-23 04:33:57
【问题描述】：

我正在使用 Tailwind CSS，我想在模态框上显示白色下拉菜单。我尝试使用z-index，但我无法让它工作。

有什么想法吗？

这是我的模态代码：

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

这是我的下拉代码：

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

【问题讨论】：

从模态组件中移除overflow-y-auto...
如果您将代码 sn-p 移动到 stackblitz 中并与我们分享链接，将会非常有帮助。谢谢
@Vladimir Gonchar，这不会解决问题
我们这里没有任何来自 OP 的消息，所以¯_(ツ)_/¯ 无论如何也没有办法继续进行。

标签： html css vue.js tailwind-css headless-ui

【解决方案1】：

从<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"> 中删除类overflow-hidden。 codesandbox

【讨论】：

【解决方案2】：

将设置子元素位置的类从absolute改为fixed

【讨论】：