html - CSS Absolute / Relative Issue

Question

I have a parent element that I have set relative on, and child elements that have absolute

However, those child elements when shown are still hidden for some reason (even after setting z-index), see the following code:

<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&gt

Answer 1

This is due to the z-10 you are applying to the parent element. This one can be removed as it's useless. It's also due to the transformation you are applying to the element on hover.

Remove it and it will work fine.

<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-transitio