CSS绝对/相对问题

我有一个设置了relative的父元素和具有absolute的

子元素然而，由于某些原因(即使在设置z索引之后(，这些子元素在显示时仍然被隐藏，请参见以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="relative shadow-sm rounded-lg h-96">
<ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div onclick="location.href='campaign/0e4bb7f1-352d-4cf9-b6bb-3c00c7a310a7'"
wire:key="campaign--14" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">5 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(14)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(14)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(14)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/403f251d-fa34-426b-b623-76b6ba200f6d'"
wire:key="campaign--13" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(13)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(13)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(13)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/fddbacf7-ed69-43cf-9355-0379237f9c53'"
wire:key="campaign--12" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(12)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(12)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(12)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/37164604-0fa5-4d2d-a344-00ff7010c182'"
wire:key="campaign--11" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(11)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(11)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(11)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/01c535bf-68bf-4bcd-b3a6-3239f5212650'"
wire:key="campaign--10" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(10)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(10)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(10)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/de321988-5119-42ae-bd2d-a5984dae623d'"
wire:key="campaign--9" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(9)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(9)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(9)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>

当你按下上下文菜单时，它应该显示在所有内容之上，但它没有。

应该这么简单——我错过了什么？

这是由于要应用于父元素的z-10。这个可以去掉，因为它没用。这也是由于您在悬停时对元素应用的转换。

把它取下来，它就会正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="relative shadow-sm rounded-lg h-96">
<ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div onclick="location.href='campaign/37164604-0fa5-4d2d-a344-00ff7010c182'"
wire:key="campaign--11" >
<li
class="cursor-pointer transition duration-500 ease-in-out relative col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(11)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(11)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(11)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/01c535bf-68bf-4bcd-b3a6-3239f5212650'"
wire:key="campaign--10" >
<li
class="cursor-pointer transition duration-500 ease-in-out relative col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(10)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(10)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(10)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/de321988-5119-42ae-bd2d-a5984dae623d'"
wire:key="campaign--9" >
<li
class="cursor-pointer transition duration-500 ease-in-out relative col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(9)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(9)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(9)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>

或者保持转换并调整悬停上父对象的z索引

.z-10:hover {
z-index:50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="relative shadow-sm rounded-lg h-96">
<ul class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div onclick="location.href='campaign/37164604-0fa5-4d2d-a344-00ff7010c182'"
wire:key="campaign--11" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(11)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(11)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(11)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/01c535bf-68bf-4bcd-b3a6-3239f5212650'"
wire:key="campaign--10" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(10)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(10)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(10)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div onclick="location.href='campaign/de321988-5119-42ae-bd2d-a5984dae623d'"
wire:key="campaign--9" class="z-10">
<li
class="cursor-pointer transition duration-500 ease-in-out transform hover:-translate-y-0.5 hover:scale-100 col-span-1 flex items-center bg-white border border-gray-200 rounded-md shadow-sm">
<div
class="rounded-md ml-2 flex-shrink-0 flex items-center justify-center w-16 h-16 text-white text-center text-sm leading-5 font-medium bg-blue-500">
<svg class="text-white h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="flex-1 px-4 py-2 truncate">
<div
class="text-gray-900 text-sm leading-5 font-medium hover:text-gray-600 transition ease-in-out duration-150">
Untitled Campaign</div>
<p class="text-sm leading-5 text-gray-500">Leads: 3</p>
<p class="text-xs leading-5 text-gray-500">14 hours ago</p>
</div>
<div x-data="{ open: false }" @keydown.escape="open = false" @click.away="open = false"
class="inline-block text-left">
<div>
<button @click.stop="" @click="open = !open"
class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
</path>
</svg>
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" style="display: none;">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="exportCampaign(9)">Export</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showRenameModal(9)">Rename</a>
<a @click.stop=""
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
wire:click="showDeleteModal(9)">Delete</a>
</div>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>

我添加了一个自定义CSS，但如果你像这里解释的那样调整配置，你可以使用hover:z-50：https://tailwindcss.com/docs/hover-focus-and-other-states

获取有关该问题的更多详细信息的相关问题：为什么可以'；具有z索引值的元素是否覆盖其子元素？

相关内容

最新更新

热门标签：