Tailwind - 绝对与相对位置下拉菜单

Posted 2023-03-07

【中文标题】Tailwind - 绝对与相对位置下拉菜单

【英文标题】：Tailwind - absolute vs relative position dropdown

【发布时间】：2021-08-28 17:40:23

【问题描述】：

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

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 但没有帮助。

【参考方案1】：

您需要对<ul> 标记使用规则z-index。在规则 Tailwind 中有一组包含此规则的类。

点击此link，您可以查看更多详情。

我添加了课程z-50。

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

【讨论】：

谢谢！它适用于这个codepen，但是，我有一个更复杂的反应代码，我尝试使用这个z-50但没有工作，无论z-index如何，都会显示另一个具有以下位置相对类的元素。你知道问题出在哪里吗？

@LucasAltamirano，z-50 是 z-index: 50。所以你的代码的 z-index 高于 z-index: 50。毕竟 Tailwind 是一组 CSS 样式，它可能重叠的东西。看看开发者工具。

我必须将 z-index: -1 设置为内联样式属性才能正常工作.. 顺风 z-0 与 z-50 不能正常工作.. 想知道为什么