title: Problem with stacking of elements in tailwindcss
body: <p>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.</p>
  
  <p>Here is a fiddle which if viewed at 616 px width demonstrates my issue.
  <a href="https://jsfiddle.net/finchy70/y4db39ce/6/" rel="nofollow noreferrer">JS Fiddle Link</a></p>
  
  <pre><code>
      &lt;div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden"&gt;
          &lt;div class="relative max-w-screen-xl mx-auto"&gt;
              &lt;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"&gt;
                  &lt;div class="pt-2 px-4 sm:px-6 lg:px-8"&gt;
                      &lt;nav class="relative flex items-center sm:h-10 justify-start"&gt;
                          &lt;div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0"&gt;
                              &lt;div class="flex items-center justify-between w-full lg:w-auto mt-4"&gt;
                                  &lt;div class="-mr-2 items-center lg:hidden"&gt;
                                      &lt;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"&gt;
                                          &lt;svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"&gt;
                                              &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /&gt;
                                          &lt;/svg&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;img class="lg:hidden" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="hidden lg:flex lg:items-center lg:block lg:mt-4"&gt;
                              &lt;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"&gt;
                                  &lt;input width="100" height="50" type="image" src="{{asset('images/EPSnav.png')}}" alt="EPS Logo"&gt;
                              &lt;/a&gt;
                              &lt;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"&gt;High Voltage&lt;/a&gt;
                              &lt;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"&gt;Low Voltage&lt;/a&gt;
                              &lt;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"&gt;EV Charge Points&lt;/a&gt;
                              &lt;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"&gt;More...&lt;/a&gt;
  
                              &lt;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" &gt;
                                  &lt;a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
                                     href="#"&gt;
                                      Maintenance and Inspection
                                  &lt;/a&gt;
                                  &lt;a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
                                     href="/design"&gt;
                                      Design Services
                                  &lt;/a&gt;
                                  &lt;a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
                                     href="#"&gt;
                                      Senior Authorised Personnel
                                  &lt;/a&gt;
                                  &lt;a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
                                     href="/contact"&gt;
                                      Contact Us
                                  &lt;/a&gt;
                                  &lt;a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
                                     href="#"&gt;
                                      About Us
                                  &lt;/a&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                      &lt;/nav&gt;
                  &lt;/div&gt;
  
                  &lt;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"
                  &gt;
  
                      &lt;div class="relative rounded-lg bg-white shadow-xs overflow-hidden"&gt;
                          &lt;div class="px-5 pt-4 flex items-center justify-between"&gt;
                              &lt;div class="-mr-2"&gt;
                                  &lt;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"&gt;
                                      &lt;svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"&gt;
                                          &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /&gt;
                                      &lt;/svg&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                              &lt;img class="ml-2" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt=""&gt;
                          &lt;/div&gt;
                          &lt;div class="relative px-2 pt-2 pb-3"&gt;
                              &lt;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"&gt;Home&lt;/a&gt;
                              &lt;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"&gt;High Voltage&lt;/a&gt;
                              &lt;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"&gt;Low Voltage&lt;/a&gt;
                              &lt;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"&gt;EV Charge Points&lt;/a&gt;
                              &lt;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"&gt;Maintenance and Inspection&lt;/a&gt;
                              &lt;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"&gt;Design Services&lt;/a&gt;
                              &lt;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"&gt;Senior Authorised Personnel&lt;/a&gt;
                              &lt;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"&gt;Contact Us&lt;/a&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;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"&gt;
                      &lt;div class="text-center lg:text-left"&gt;
                          &lt;h1 class="text-5xl text-gray-700 font-bold"&gt;Electrical Power Solutions&lt;/h1&gt;
  {{--                        &lt;img class="h-32 mx-auto mb-4 lg:mx-0" src="{{asset('images/epslogo.png')}}" alt="EPS Logo"&gt;--}}
                          &lt;h2 class="text-indigo-400 text-4xl"&gt;Over {{now()-&gt;year - 2005}} years of Experience.&lt;/h2&gt;
                          &lt;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"&gt;
                              Supplying High and Low voltage services to the Energy Sector for over {{now()-&gt;year - 2005}} years.
                          &lt;/p&gt;
                          &lt;div class="mt-6"&gt;
                              &lt;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"&gt;
                                  Contact Us
                              &lt;/a&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;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"&gt;
                      &lt;polygon points="50,0 100,0 50,100 0,100" /&gt;
                  &lt;/svg&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="hidden lg:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"&gt;
              &lt;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="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  {{--Carousel Heading with standard nav --}}
      &lt;div class="hidden lg:block lg:mt-1 lg:mb-1"&gt;
          &lt;div class="glide"&gt;
              &lt;div class="glide__track" data-glide-el="track"&gt;
                  &lt;ul class="glide__slides"&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;a href="/hv"&gt;&lt;img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;a href="/design"&gt;&lt;img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;a href="/rope"&gt;&lt;img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;a href="/wts"&gt;&lt;img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="lg:hidden"&gt;
          &lt;div class="glide1"&gt;
              &lt;div class="glide__track" data-glide-el="track"&gt;
                  &lt;ul class="glide__slides"&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="glide__slide"&gt;
                          &lt;div class="block w-full text-white text-5xl text-center"&gt;
                              &lt;img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Any help is appreciated.</p>