我使用Tailwindcss为我的Rails应用程序，我的同事创建了一个下拉菜单导航栏。我现在尝试添加一个包含导航条的Tailwindcss模板英雄部分(我在下面的代码中注释掉了)。现在下拉菜单隐藏在英雄部分后面。我试过将位置从绝对位置更改为相对位置，并给它一个比英雄部分更高的z-index值，但没有成功。
如何使下拉菜单出现在页面内容的顶部?如有任何帮助，我将不胜感激，谢谢。
_navbar.html.erb
<nav class="z-20 bg-white border-b border-gray-100 shadow-md">
<div class="max-w-7xl mx-auto p-4 sm:px-6 lg:px-8">
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between relative">
<nav class="flex space-x-10">
<%= link_to t("navigation_bar.home"), root_path, class:"text-base font-medium text-gray-500 hover:text-gray-900" %>
</nav>
<% if user_signed_in? %>
<div class="flex items-center relative">
<button class="p-1 rounded-full text-gray-600 hover:text-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative inline-block text-left dropdown">
<span class="rounded-md shadow-sm">
<button class="inline-flex justify-center px-1 py-1 w-full text-sm font-medium leading-5 text-gray-800 transition duration-150 ease-in-outp-1 rounded-full text-gray-600 hover:text-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
<div class="relative w-8 h-8 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-500">
<svg class="absolute w-10 h-10 text-gray-300 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
</button>
</span>
<div class="opacity-0 invisible dropdown-menu transition-all duration-300 transform origin-top-right -translate-y-2 scale-95">
<div class="absolute right-0 w-56 mt-2 origin-top-right bg-gray-100 border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-117" role="menu">
<div class="px-4 py-3">
<li class="text-sm list-none leading-5"><%= t("navigation_bar.signed_in_as" , user_full_name: current_user.full_name) %></li>
<li class="text-sm list-none font-medium leading-5 text-gray-900 truncate"><%= current_user.email %></li>
<div class="py-1">
<a href="javascript:void(0)" tabindex="0" class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem" ><%= t("navigation_bar.dashboard") %></a>
<a href="javascript:void(0)" tabindex="1" class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem" ><%= t("navigation_bar.settings") %></a>
<%= link_to t("navigation_bar.profile"), profile_path, class: 'text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem' %>
<span role="menuitem" tabindex="-1" class="flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:hover:border-b-2 border-gray-400 rounded-3xl text-gray-700 cursor-not-allowed opacity-50" aria-disabled="true">New feature (soon)</span>
<div class="py-1">
<a href="javascript:void(0)" tabindex="3" role="menuitem" >
<%= link_to t("navigation_bar.sign_out"), destroy_user_session_path, method: :delete, class:"text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:hover:border-b-2 border-gray-400 rounded-3xl" %></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% else %>
<div class="flex items-center md:ml-12">
<%= link_to t("sign_in"), new_user_session_path, class: "text-base font-medium text-gray-500 hover:text-gray-900" %>
<%= link_to t("sign_up"), register_path, class: "ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700" %>
</div>
<% end %>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden p-2 space-y-1 sm:px-3" id="mobile-menu">
<div class="pb-2 justify-between">
<%# AVATAR ICON %>
<div class="flex items-center justify-between pl-5 pr-2">
<div>
<div class="flex itmes-center">
<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex items-center ml-4">
<% if current_user %>
<div class="text-base font-medium leading-none text-white"><%= current_user.first_name %></div>
<div class="text-sm font-medium leading-none text-gray-400"><%= current_user.email %></div>
<% end %>
</div>
</div>
</div>
<div class="relative" data-controller="dropdown">
<!-- Hamburger menu -->
<button data-action="click->dropdown#toggle" data-dropdown-target="button" type="button" class="rounded-3xl p-1 -mr-4 inline-flex items-center justify-center text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400" aria-expanded="false">
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="false">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div data-dropdown-target="menu" class="absolute pin-r mt-2 transform shadow transition hover:border-gray-600 hidden right-0">
<div class="block w-80 justify-center bg-gray-800 py-1 px-8 leading-8 divide-y divide-gray-600 rounded-md border-gray-600 overflow-hidden">
<%= link_to t("navigation_bar.home"), root_path, class:"px-1 py-2 justify-center text-white text-decoration-none group flex items-center text-base font-medium hover:text-gray-600 hover:bg-gray-600" %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<style>
.dropdown:focus-within .dropdown-menu {
opacity:1;
transform: translate(0) scale(1);
visibility: visible;
z-index: 20;
}
</style>
home.html.erb
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<!-- commented out -->
<%# <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span class="sr-only">Workflow</span>
<img alt="Workflow" class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg">
</a>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Product</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Features</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Marketplace</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Company</a>
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Log in</a>
</div>
</nav> %>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<%# <div class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="">
</div>
<div class="-mr-2">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Close main menu</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Product</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Marketplace</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Company</a>
</div>
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100"> Log in </a>
</div>
</div> %>
<!-- commented back-->
</div>
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline"><%= t("home_page.hero.header_1") %></span>
<span class="block text-indigo-600 xl:inline"><%= t("home_page.hero.header_2") %></span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"><%= t("home_page.hero.description") %></p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"><%= t("home_page.hero.cta_1") %></a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="/about" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"><%= t("home_page.hero.cta_2") %></a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://source.unsplash.com/Y5bvRlcCx8k" alt="">
</div>
</div>
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative z-[100]">
#... elements ....
</Menu>
类z-index将解决这个问题。在twinland CSS中，你可以这样分配z-index:z-[100]