CSS 绝对/相对问题
Posted
技术标签:
【中文标题】CSS 绝对/相对问题【英文标题】：CSS Absolute / Relative Issue 【发布时间】：2021-04-15 04:09:02 【问题描述】：我有一个已设置relative 的父元素，以及具有absolute 的子元素
但是，这些子元素在显示时由于某种原因仍然隐藏（即使在设置 z-index 之后），请参见以下代码：
<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-
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-
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-
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-
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-
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-
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>当您按下上下文菜单时，它应该显示在其他所有内容之上，但它没有。
应该这么简单——我错过了什么？
【问题讨论】：
【参考方案1】：这是由于您将 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-
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-
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-
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-index
.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-
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-
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-
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
获取有关该问题的更多详细信息的相关问题：Why can't an element with a z-index value cover its child?
【讨论】：
以上是关于CSS 绝对/相对问题的主要内容，如果未能解决你的问题，请参考以下文章