Tailwind - 绝对位置与相对位置下拉列表

Question

我在尝试设置下拉列表的位置时遇到问题。我希望它位于所有元素之上，但是当它进入相对定位的元素时，它就在它的后面。这是我的意思的代码示例。

html 示例：

  <div class="dropdown  relative">
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
      <li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
      <li class=""><a class="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Three is the magic number</a></li>
    </ul>
  </div>
  <div class="dropdown relative">
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
      <span class="mr-1">Dropdown</span>
      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
    </button>
    <ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
      <li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
      <li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
      <li class=""><a class="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Three is the magic number</a></li>
    </ul>
  </div>

</div>

css:

.dropdown:hover .dropdown-menu {
  display: block;
}

直播： https://codepen.io/lcsalt/pen/MWpPvJp

无论如何，如何确保列表高于一切？我尝试使用 z-index 但没有帮助。

Answer 1

您需要为 <ul> 标签使用规则 z-index。在法规 Tailwind 中有一组 classes 包含此规则。

点击这个link你可以看到更多的细节。

我添加了classz-50。

<ul class="dropdown-menu absolute hidden text-gray-700 pt-1 z-50">

Tailwind - 绝对位置与相对位置下拉列表

Tailwind - absolute vs relative position dropdown

html

css

frontend

position

tailwind-css