Question 45624 in CSS Question posted in
Some basic documentation can be found here.

Dropdown pass behind swiperjs, z-index issue or tailwindcss issue?

I’m trying to use SwiperJS but I have a problem with the z-index I think.

I have my menu going below the slider and I don’t understand how this is happening.

I tried to put a z-index: 1000 on the menu and a z-index: 1 on the slider.

I tried to put a z-index: -1 on the slider and it works, but I lose the use of the navigation buttons…

Am I blind? I think so.

enter image description here

<header class="menu">
    <div class="menu__logo">
        <a href="/">
            kappa
        </a>
    </div>
    <div class="menu__nav">
        <ul>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
            <li class="menu__nav__dropdown" x-data="{open: false}" x-on:mouseover="open = true" x-on:mouseover.away="open = false">
                    <span>
                        kappa
                    </span>
                <x-icons.array-down />
                <div class="menu__nav__dropdown__block" x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" @click.away="open = false" style="display: none;">
                    <div class="menu__nav__dropdown__block__bg">
                        <div class="menu__nav__dropdown__link__wrapper">
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                            <a href="#" class="menu__nav__dropdown__link">
                                <p>
                                    kappa
                                </p>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">
                    kappa
                </a>
            </li>
        </ul>
    </div>
    <div class="menu__phone">
        <div class="menu__phone-icon">
            <x-icons.phone />
        </div>
        <div class="menu__phone-number">
            <a href="#">kappa</a>
        </div>
    </div>
</header>

.menu {
    @apply flex w-full justify-between py-4 sticky base;
}

.menu__logo {
    @apply w-52;
}

.menu__nav ul {
    @apply list-none flex gap-x-10;
}

.menu__nav {
    @apply my-auto;
}

.menu__phone {
    @apply flex gap-x-3;
}

.menu__phone-icon {
    @apply bg-sc-orange p-2 fill-white;
}

.menu__phone-number {
    @apply my-auto font-bold;
}

.menu__nav__dropdown {
    @apply cursor-pointer fill-primary flex gap-x-3
}

.menu__nav__dropdown svg {
    @apply my-auto
}

.menu__nav__dropdown__block {
    @apply absolute left-1/2 transform -translate-x-1/2 mt-8 px-2 w-screen max-w-xs sm:px-0 z-10;
}

.menu__nav__dropdown__block__bg {
    @apply shadow-lg ring-1 ring-black ring-opacity-5 z-10;
}

.menu__nav__dropdown__link__wrapper {
    @apply relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8;
}

.menu__nav__dropdown__link {
    @apply -m-3 p-3 block hover:bg-gray-50;
}

<div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
            <div class="swiper-slide">
                <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
            </div>
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

I would just like the menu to go in front of the slider.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution, I simply added the tailwind classes to the header : z-20 relative


  2. 0

    Since your codes are complex, I will explain this with a simple example. I think the problem is that you haven’t given the relative class to the field you want to stand out. If you are using z-index, you should also add the relative class. In the example below, you can see that if you remove the relative class from the title, the title will go to the back.If this is not enough, you should add that it is important to the classes. SwiperJS might be squashing your classes somehow.

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search