I have a web page styled with tailwindcss that also uses glide.js to create a carousel element. I have a mobile menu triggered by a hamburger button but the resulting menu renders below the glide.js element. I have tried making elements relative and absolute in multiple combinations and also tried static on the carousel element. I have also tried z indexing the elemnts but I cant get my popup menu to render over the glide.js carousel.
Here is a fiddle which if viewed at 616 px width demonstrates my issue. JS Fiddle Link
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
<div class="relative max-w-screen-xl mx-auto">
<div class="relative z-10 pb-8 bg-blue-100 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-6 xl:pb-8">
<div class="pt-2 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center sm:h-10 justify-start">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full lg:w-auto mt-4">
<div class="-mr-2 items-center lg:hidden">
<button @click="open = true" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<img class="lg:hidden" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
</div>
<div class="hidden lg:flex lg:items-center lg:block lg:mt-4">
<a href="/" class="font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">
<input width="100" height="50" type="image" src="{{asset('images/EPSnav.png')}}" alt="EPS Logo">
</a>
<a href="/hv" class="ml-6 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">High Voltage</a>
<a href="/lv" class="ml-6 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Low Voltage</a>
<a href="/ev" class="ml-6 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">EV Charge Points</a>
<a href="#" @click="menu = true" class="ml-6 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">More...</a>
<div x-show.transition.duration.600ms="menu" @click.away="menu = false" class="z-10 absolute ml-24 top-12 right-0 py-2 bg-white rounded shadow-2xl" >
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Maintenance and Inspection
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/design">
Design Services
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Senior Authorised Personnel
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/contact">
Contact Us
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
About Us
</a>
</div>
</div>
</nav>
</div>
<div
x-show="open"
x-transition:enter="duration-150 ease-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="duration-100 ease-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-50"
>
<div class="relative rounded-lg bg-white shadow-xs overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div class="-mr-2">
<button @click="open = false" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<img class="ml-2" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
<div class="relative px-2 pt-2 pb-3">
<a href="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Home</a>
<a href="/hv" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">High Voltage</a>
<a href="/lv" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Low Voltage</a>
<a href="/ev" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">EV Charge Points</a>
<a href="/hv" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Maintenance and Inspection</a>
<a href="/design" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Design Services</a>
<a href="/design" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Senior Authorised Personnel</a>
<a href="/contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-indigo-200 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out">Contact Us</a>
</div>
</div>
</div>
<div class="relative mt-6 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-6 lg:mt-8 lg:px-8 xl:mt-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl text-gray-700 font-bold">Electrical Power Solutions</h1>
{{-- <img class="h-32 mx-auto mb-4 lg:mx-0" src="{{asset('images/epslogo.png')}}" alt="EPS Logo">--}}
<h2 class="text-indigo-400 text-4xl">Over {{now()->year - 2005}} years of Experience.</h2>
<p class="mt-2 text-base text-gray-500 sm:mt-4 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-2 md:text-xl lg:mx-0">
Supplying High and Low voltage services to the Energy Sector for over {{now()->year - 2005}} years.
</p>
<div class="mt-6">
<a href="/contact" class="text-center rounded-lg border border-transparent bg-indigo-600 px-1 py-1 text-xl leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150">
Contact Us
</a>
</div>
</div>
</div>
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-blue-200 transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
</div>
</div>
<div class="hidden lg:block 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="{{asset('images/high-voltage.jpg')}}" alt="" />
</div>
</div>
{{--Carousel Heading with standard nav --}}
<div class="hidden lg:block lg:mt-1 lg:mb-1">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<a href="/hv"><img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture"></a>
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<a href="/design"><img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents"></a>
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<a href="/rope"><img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work"></a>
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<a href="/wts"><img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="glide1">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset">
</div>
</li>
</ul>
</div>
</div>
</div>
Any help is appreciated.
