Z-index 不适用于 Vue + Laravel 项目中的 vue-awesome-swiper

Posted 2023-05-08

【中文标题】Z-index 不适用于 Vue + Laravel 项目中的 vue-awesome-swiper

【英文标题】：Z-index not working on vue-awesome-swiper in Vue + Laravel project

【发布时间】：2021-10-25 12:42:21

【问题描述】：

我在 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"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  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>

这是swiper的脚本：

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

如您所见，swiper 按钮的 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"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  class="img-fluid-ambientes">
                </swiper-slide>
                <swiper-slide class="col-border" style="width: auto">
                        <img src="/images/homepage/ambientes/ambience-1.jpg"  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>

但是当我使用上面的代码时得到的结果是这样的。 swiper 按钮和 swiper 标题消失了，可能是因为在 vue-awesome-swiper 结构中，swiper 按钮不能在另一个 div 内。我不确定为什么。

关于如何获得正确结果的任何建议？

【问题讨论】：

如果父项被隐藏，则为 .swiper-caption 提供高 z 索引，其中的子 dom 也是如此（在 .swiper-caption 上引用绝对位置，因为它也具有定义的位置）跨度>

感谢您的评论，但我不太明白您的建议。很抱歉 :( 你的意思是我应该在 swiper 标题上设置更高的 z-index，即使我希望它位于箭头后面？

【参考方案1】：

尝试在子元素上使用 999999 z-index 值和/或相对位置和/或绝对位置。

【讨论】：

感谢您的建议。孩子们都处于绝对位置，正如您在我上面发布的 css 类中看到的那样。我确实按照建议更改了 z-index 的值，但它不起作用。

这可以帮助你：***.com/a/9191845/12359854

谢谢！实际上，我什至在发布之前就找到了这篇文章。所有元素都已经具有绝对位置。我读过不透明度也可以在 z-index 方面发挥作用，但它仍然不起作用。唉，得继续努力。无论如何谢谢:)

不客气，但显然需要 position: relative

父div设置了位置相对属性。仍然无法解决问题:(