我正在尝试使用SwiperJS，但是我想z索引有问题。
我的菜单在滑块下面，我不明白这是怎么发生的。
我试着在菜单上放一个z-index: 1000，在滑块上放一个z-index: 1。
我试着在滑块上放一个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>

我只想把菜单放在滑块的前面。