Problem with stacking of elements in tailwindcss - tailwind-css

Question

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>
High Voltage
Low Voltage
EV Charge Points
More...
<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">
Home
High Voltage
Low Voltage
EV Charge Points
Maintenance and Inspection
Design Services
Senior Authorised Personnel
Contact Us
</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">
<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>
<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.

Answer 1

Problem is not with slider, z-index, absolute etc, but in fact that you intentionally putted "overflow-hidden" on menu container. Because of this menu that is bigger than its container is "cutted". To test this you can actually remove all content from below (including glide) and keep only menu (header) - problem will still remain.
So replace this:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
with:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white">
Fiddle: https://jsfiddle.net/39d6qhg5/
More info about overflow:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://tailwindcss.com/docs/overflow/