Z-index 不適用於 Vue + Laravel 專案中的 vue-awesome-swiper

Question

我在 Vue LAravel 專案中使用 vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper。

這就是我想要達到的結果。滑動箭頭位於頂部並且可點擊。

相反，我正在實現的是這個。滑動箭頭不在頂部且不可點擊。

為了讓 vue-awesome-swiper 運作，程式碼必須遵循特定的格式。

這是我正在使用的刷卡程式碼：

<div class="container-fluid p-0 cd-contentx">
        <div class="row mx-0 position-relative">
            <swiper class="swiper position-relative" :options="swiperOptionAuto">
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>                
                <div class="swiper-btn-prev swiper-light" slot="button-prev"></div>
                <div class="swiper-btn-next swiper-light" slot="button-next"></div>
            </swiper>
            <div class="col-12 text-center swiper-caption">
                <h4 class="title-swiper-caption">Exquisite Inspirations Room by Room</h4>
                <a>EXPLORE ALL ROOMS</a>
            </div>
        </div>
    </div>

這是滑動器的腳本：

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import "swiper/css/swiper.css"
  export default {
    name: 'swiper-example-navigation',
    title: 'Navigation',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOptionAuto: {
            slidesPerView: 'auto',
            loop: true,
            centeredSlides: true,
            navigation: {
                nextEl: '.swiper-btn-next',
                prevEl: '.swiper-btn-prev'
            }
        }
      }
    }
  }
</script>

這些是樣式：

.swiper-btn-next, .swiper-btn-prev {
    top: 93%;    
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    padding: 6px;
}

.swiper-caption {
    z-index: 1;
    background-color: #32151a;
    opacity: 70%;
    margin-bottom: 3px;
    padding: 2rem;
    position:absolute;
    bottom:0;
    right:0;
}

如您所見，滑動按鈕的 z-index 較高，但它們不在 .swiper-caption div 的頂部。我嘗試更改 html 程式碼的結構，使滑動按鈕和滑動標題位於同一個 div 中，如下所示：

<div class="container-fluid p-0 cd-contentx">
        <div class="row mx-0 position-relative">
            <swiper class="swiper position-relative" :options="swiperOptionAuto">
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
                </swiper-slide>
                <div class="col-12 text-center swiper-caption">
                        <h4 class="title-swiper-caption">Exquisite Inspirations Room by Room</h4>
                        <a>EXPLORE ALL ROOMS</a>
                        <div class="swiper-btn-prev swiper-light" slot="button-prev"></div>
                        <div class="swiper-btn-next swiper-light" slot="button-next"></div>
                </div>             
             </swiper>            
        </div>
    </div>

但是當我使用上面的程式碼時得到的結果是這樣的。滑動按鈕和滑動標題消失了，可能是因為在 vue-awesome-swiper 結構中，滑動按鈕不能位於另一個 div 內。我不知道為什麼。

關於如何獲得正確結果有什麼建議嗎？

Answer 1

嘗試在子元素上使用 999999 z-index 值和/或相對位置和/或絕對位置。