下拉传递落后于 swiperjs、z-index 问题或 tailwindcss 问题？

Question

我正在尝试使用 SwiperJS，但我认为 z-index 有问题。

我的菜单位于 slider 下面，我不明白这是怎么回事。

我试图在菜单上放置一个z-index: 1000 ，在 slider 上放置一个z-index: 1 。

我试图在 slider 上放置一个z-index: -1并且它有效，但我无法使用导航按钮......

我瞎了吗？ 我想是这样。

<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>

我只想把菜单转到 slider 前面的 go。

Answer 1

由于您的代码很复杂，我将通过一个简单的例子来解释这一点。 我认为问题在于您没有将relative class 提供给您想要脱颖而出的领域。 如果你使用的是z-index，你还应该添加relative class。在下面的例子中，你可以看到如果你从标题中删除相对class，那么标题将go放在后面。如果这还不够，你应该补充一点，这对课程很重要。 SwiperJS 可能会以某种方式压缩你的类。

演示