z-index not working (AlpineJS & Tailwind)

[Core-Coder]

Hi, I've got some trouble where the section i wanted pop out behind another section always came out in front of it, i already use position class for it. But it always doesn't work. I've tried use like z-50 for the above section but its just the same.

@if(count($response) > 1)
        @foreach($response as $r)
        <div x-data="{details: false}">
            <div class="text-gray-700 border border-gray-300 relative z-0 rounded-md shadow-md">
                <div class="grid items-center justify-center grid-cols-12 gap-5 px-6 py-4">
                    <div class="flex items-center col-span-2 gap-5 truncate">
                        <img class="h-10 w-15" src="{{ asset('img/logo/'. $r->airlineCode .'.svg') }}" alt="seindo airasia">
                        <div class="w-full text-left truncate">
                            <div class="w-full text-lg font-bold truncate">{{$r->airlineName}}</div>
                            <div class="-mt-1 text-xs font-semibold text-gray-500">{{$r->airlineAndFLight->flightNo}}</div>
                        </div>
                    </div>
                    <div class="justify-center col-span-4 gap-4">
                        @foreach($r->dataDepartArrival as $p)
                        <div class="grid items-center grid-cols-8">
                            <div class="col-span-3 text-left">
                                <div class="text-base font-bold">08:00</div>
                                <div class="w-full -mt-1 text-xs font-semibold text-gray-500 truncate">{{$p->depart}}</div>
                            </div>
                            <div class="flex items-center col-span-2 mx-2">
                                <div class="relative w-full border-t-2 border-dashed border-seindo"></div>
                                    <svg class="w-20 mx-2 fill-current text-seindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.7 426.7"><path d="M128 416h42.7l106.7-170.7h117.3c17.7 0 32-14.3 32-32s-14.3-32-32-32H277.3L170.7 10.7H128l53.3 170.7H64l-32-42.7H0l21.3 74.7L0 288h32l32-42.7h117.3L128 416z"/></svg>
                                <div class="relative w-full border-t-2 border-dashed border-seindo"></div>
                            </div>
                            <div class="col-span-3 text-right truncate">
                                <div class="text-base font-bold">09:30</div>
                                <div class="w-full -mt-1 text-xs font-semibold text-gray-500 truncate">{{$p->arrival}}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="col-span-2 text-center">
                        <div class="text-lg font-bold">{{$r->airlineAndFLight->totalFlyTime}}</div>
                        @if(count($r->dataDepartArrival) == 1)
                            <div class="-mt-1 text-xs font-semibold text-gray-500">Direct</div>
                        @else
                            <div class="-mt-1 text-xs font-semibold text-gray-500">Connecting Flight</div>
                        @endif
                    </div>
                    <div class="flex items-center justify-center col-span-2 gap-5">
                        <img class="h-5" src="{{ asset('img/baggage 20kg.svg') }}" alt="seindo">
                        <svg class="h-5 fill-current text-seindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.38 480.38"><path d="M192.714 0h-32c-22.08.026-39.974 17.92-40 40v78.008a118.783 118.783 0 0012.464 52.8 102.398 102.398 0 0110.736 48.624l-6.4 220.376c-.757 21.636 16.168 39.79 37.805 40.547 21.636.757 39.79-16.168 40.547-37.805a39.2 39.2 0 000-2.743l-6.4-220.352a102.348 102.348 0 0110.736-48.6 118.768 118.768 0 0012.512-52.84V40c-.026-22.08-17.919-39.973-40-40zm24 118.016a102.616 102.616 0 01-10.776 45.648 118.401 118.401 0 00-12.424 56.224l6.4 220.32a23.033 23.033 0 01-6.576 16.8c-9.23 9.033-23.986 9.033-33.216 0a23.01 23.01 0 01-6.608-16.768l6.4-220.344a118.407 118.407 0 00-12.416-56.232 102.64 102.64 0 01-10.784-45.656V40a24 24 0 0116-22.528V112h16V16h16v96h16V17.472a24 24 0 0116 22.528v78.016zM352.714 239.84V8a8 8 0 00-8-8c-27.458-.087-52.17 16.643-62.288 42.168a243.743 243.743 0 00-3.2 172.568l9.472 26.512-6.848 198.496c-.755 21.482 16.048 39.508 37.529 40.263 21.482.755 39.508-16.048 40.263-37.529.032-.911.032-1.823 0-2.733l-6.928-199.905zM297.282 48.112a50.832 50.832 0 0139.432-31.496V232h-34.4l-8.088-22.64a227.705 227.705 0 013.056-161.248zm39.912 408.896c-9.137 9.016-23.823 9.016-32.96 0a22.76 22.76 0 01-6.4-16.72L304.442 248h32.544l6.632 192.288a22.758 22.758 0 01-6.424 16.72z"/></svg>
                        <svg class="h-5 fill-current text-seindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.333 469.333"><path d="M170.667 192v170.667L320 277.333z"/><path d="M426.667 106.667H264.853l70.293-70.293L320 21.333l-85.333 85.333-85.333-85.333-15.04 15.04 70.187 70.293H42.667C19.093 106.667 0 125.76 0 149.333v256C0 428.907 19.093 448 42.667 448h384c23.573 0 42.667-19.093 42.667-42.667v-256c-.001-23.573-19.094-42.666-42.667-42.666zm0 298.666h-384v-256h384v256z"/></svg>
                    </div>
                    <div class="flex items-center justify-end col-span-2 gap-2">
                        <div class="text-xl font-bold">{{ "Rp " . number_format($r->fares->totalFare->total->amount,0,',','.') }}</div>
                        <div class="text-xs font-semibold text-gray-500"> / pax</div>
                    </div>
                </div>
                <div class="flex items-center justify-between px-6 relative py-4 border-t border-gray-300">
                    <div @click.prevent="details = !details" class="flex items-center gap-3 cursor-pointer">
                        <div class="text-sm font-semibold">Details</div>
                        <svg :class="{ '-rotate-180' : details === true }" class="h-5 transition-all duration-500 transform fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="px-6 py-2 text-xs font-bold text-white rounded-md bg-seindo">BOOK</div>
                </div>
            </div>
            <div x-cloak x-show="details"
                x-transition:enter="transition-all transform duration-500 ease-out"
                x-transition:enter-start="-mt-14"
                x-transition:enter-end="opacity-100 mt-0"
                x-transition:leave="transition-all transform duration-500 ease-in"
                x-transition:leave-end="-mt-14"
                class="text-gray-700 bg-gray-100 relative -z-1 rounded-md">
                <div class="flex justify-center p-5">
                    <div class="flex content-between justify-center w-1/12 space-x-3">
                        <div class="flex flex-wrap content-between justify-end w-1/2 text-right">
                            <div class="">
                                <div class="font-bold">08:00</div>
                                <div class="font-semibold text-gray-500 text-small-seindo">07 Jan</div>
                            </div>
                            <div class="items-center font-semibold text-gray-500 text-small-seindo">1h 30m</div>
                            <div>
                                <div class="font-bold">09:30</div>
                                <div class="font-semibold text-gray-500 text-small-seindo" >07 Jan</div>
                            </div>
                        </div>
                        <div class="relative flex-col items-end justify-center w-1/2">
                            <div class="absolute w-4 h-4 rounded-full bg-seindo"></div>
                            <div class="h-full ml-2 border-l border-seindo"></div>
                            <div class="absolute bottom-0 w-4 h-4 rounded-full bg-seindo"></div>
                        </div>
                    </div>
                    <div class="flex-col w-11/12 space-y-5">
                        <div>
                            <div class="font-bold">Medan</div>
                            <div class="font-semibold text-gray-500 text-small-seindo">Kualanamu International Airport (KNO)</div>
                        </div>
                        <div class="p-4 bg-white divide-y-2 divide-gray-100 rounded-md">
                            <div class="flex items-start justify-between">
                                <div class="flex items-center pb-4 space-x-5">
                                    <img class="h-10 w-15" src="{{ asset('img/logo/'. $r->airlineCode .'.svg') }}" alt="seindo airasia">
                                    <div>
                                        <div class="text-sm font-bold">Air Asia Indonesia Airways</div>
                                        <div class="text-xs text-gray-500">QZ193</div>
                                    </div>
                                </div>
                                <div class="text-xs font-semibold text-gray-500">Sat, 07 January 2021</div>
                            </div>
                            <div class="flex items-start py-4 space-x-5">
                                <div class="w-1/5">
                                    <div class="flex items-center space-x-2">
                                        <img class="h-3" src="{{ asset('img/baggage 20kg.svg') }}" alt="seindo">
                                        <div class="text-xs font-bold">Baggage</div>
                                    </div>
                                    <div class="text-small-seindo">20 Kg Baggage, 7 Kg Cabin Baggage</div>
                                </div>
                                <div class="flex items-center w-1/5 space-x-2">
                                    <svg class="h-3 fill-current text-seindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.38 480.38"><path d="M192.714 0h-32c-22.08.026-39.974 17.92-40 40v78.008a118.783 118.783 0 0012.464 52.8 102.398 102.398 0 0110.736 48.624l-6.4 220.376c-.757 21.636 16.168 39.79 37.805 40.547 21.636.757 39.79-16.168 40.547-37.805a39.2 39.2 0 000-2.743l-6.4-220.352a102.348 102.348 0 0110.736-48.6 118.768 118.768 0 0012.512-52.84V40c-.026-22.08-17.919-39.973-40-40zm24 118.016a102.616 102.616 0 01-10.776 45.648 118.401 118.401 0 00-12.424 56.224l6.4 220.32a23.033 23.033 0 01-6.576 16.8c-9.23 9.033-23.986 9.033-33.216 0a23.01 23.01 0 01-6.608-16.768l6.4-220.344a118.407 118.407 0 00-12.416-56.232 102.64 102.64 0 01-10.784-45.656V40a24 24 0 0116-22.528V112h16V16h16v96h16V17.472a24 24 0 0116 22.528v78.016zM352.714 239.84V8a8 8 0 00-8-8c-27.458-.087-52.17 16.643-62.288 42.168a243.743 243.743 0 00-3.2 172.568l9.472 26.512-6.848 198.496c-.755 21.482 16.048 39.508 37.529 40.263 21.482.755 39.508-16.048 40.263-37.529.032-.911.032-1.823 0-2.733l-6.928-199.905zM297.282 48.112a50.832 50.832 0 0139.432-31.496V232h-34.4l-8.088-22.64a227.705 227.705 0 013.056-161.248zm39.912 408.896c-9.137 9.016-23.823 9.016-32.96 0a22.76 22.76 0 01-6.4-16.72L304.442 248h32.544l6.632 192.288a22.758 22.758 0 01-6.424 16.72z"/></svg>
                                    <div class="text-xs font-bold">Meal Available</div>
                                </div>
                                <div class="flex items-center w-1/5 space-x-2">
                                    <svg class="h-3 fill-current text-seindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.333 469.333"><path d="M170.667 192v170.667L320 277.333z"/><path d="M426.667 106.667H264.853l70.293-70.293L320 21.333l-85.333 85.333-85.333-85.333-15.04 15.04 70.187 70.293H42.667C19.093 106.667 0 125.76 0 149.333v256C0 428.907 19.093 448 42.667 448h384c23.573 0 42.667-19.093 42.667-42.667v-256c-.001-23.573-19.094-42.666-42.667-42.666zm0 298.666h-384v-256h384v256z"/></svg>
                                    <div class="text-xs font-bold">Entertainment Available</div>
                                </div>
                            </div>
                            <div class="flex items-center pt-4 justify-evenly">
                                <div class="w-1/5 text-center">
                                    <div class="text-xs">Flight</div>
                                    <div class="text-lg font-semibold">QZ193</div>
                                </div>
                                <div class="w-1/5 text-center">
                                    <div class="text-xs">Class</div>
                                    <div class="text-lg font-semibold">Economy</div>
                                </div>
                                <div class="w-1/5 text-center">
                                    <div class="text-xs">Aircraft</div>
                                    <div class="text-lg font-semibold">ATR-72</div>
                                </div>
                                <div class="w-1/5 text-center">
                                    <div class="text-xs">Seat Layout</div>
                                    <div class="text-lg font-semibold">2-2</div>
                                </div>
                                <div class="w-1/5 text-center">
                                    <div class="text-xs">Seat Pitch</div>
                                    <div class="flex items-center justify-center space-x-3">
                                        <img class="h-7" src="{{ asset('img/seats.svg') }}" alt="seindo">
                                        <div class="text-lg font-semibold">31 Inches</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="font-bold">Jakarta</div>
                            <div class="font-semibold text-gray-500 text-small-seindo">Soekarno-Hatta International Airport (CGK)</div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
        @endforeach
        @else
        <div class="flex items-center w-full text-center">
            <div class="w-full text-center">
            @if($message)
            We can't find any flight you looking for! Don't worry 😊, you can try again!
            @else
            <img src="{{asset('img/loading/load2.gif')}}" class="w-24 mx-auto">
            @endif
            </div>
        </div>
        @endif

i wanted x-show="details" section behind the above div section.

[Core-Coder]

anyone?

[simonswiss]

Hey!

You're probably having an issue with stacking contexts. Are you able to share it in a GitHub repo, or CodeSandbox? You could also remove the alpine/blade stuff and put the markup in a Tailwind Play?

It's a bit hard to troubleshoot with all the loops and logic without being able to see the UI.

[Core-Coder]

sure, here it is https://play.tailwindcss.com/Pa8ZhPPewm?layout=horizontal but i quite not sure its helpful or not cause the problem is when i click the details button which is related to AlpineJS. I cleared the laravel code so the UI have a better look.

[simonswiss]

Hey!

Looks like adding the following classes to the first div immediately inside the wrapper with the x-data does the trick:

z-10 bg-white

<div x-data="{details: false}">
  <div class="z-10 bg-white text-gray-700 border border-gray-300 relative z-0 rounded-md shadow-md">
  ...

[Core-Coder]

woahh it finally works, Thanks! I don't really understand what happened tho. Maybe a little explanation? hahahaha

[simonswiss]

Haha yeah sorry - I wrote this reply right before wrapping up for the day yesterday - just wanted to propose a working solution. 😅

Not quite sure why it was not working for you with the z-50 utility applied on the top div.

Did you create a -z-1 value in your config file? Because it's not an existing value by default, but it is present in your markup (on the details container).

Here I used z-10 because it's enough to make it go above the other section - but because the background of this banner is transparent, you could still see the details section appear "through" the banner. For that reason, I added a white background to the banner.

By the way, z-50 works too, but z-10 is enough for it to be above if the details div has no z-index utility applied.

[Core-Coder]

Thanks for the great explanation, and yea i think the problem is i forgot to add bg-white 😅. For the -z-1 i created it in my config file already for custom z-index. And for the z-50 class it was actually my test from z-10 to z-50 and i forgot to change it 😁. Btw, thanks once again for stopping by and solving my problem. Real appreciated. 👌