Vue+Laravel项目中vue-awesome-swiper轮播按钮z-index不生效求助

你遇到的z-index不生效问题本质是堆叠上下文隔离导致的：
你的切换箭头是组件的子元素，本身设置了position: relative，会生成独立的堆叠上下文，内部元素的z-index只能在swiper内部生效，无法和外部平级的.swiper-caption比较层级。而和.swiper-caption是平级元素，都在父级.row.position-relative的堆叠上下文里，默认情况下后者文档流顺序靠后，层级更高，所以会盖住前者内部的箭头。

下面是三种可行的调整方案，按需选择即可：

方案1：点击穿透（改动最小，优先推荐） #

不需要修改HTML和JS逻辑，仅调整CSS即可实现：

.swiper-caption {
    z-index: 1;
    background-color: #32151a;
    opacity: 70%;
    margin-bottom: 3px;
    padding: 2rem;
    position:absolute;
    bottom:0;
    right:0;
    /* 新增以下两行 */
    pointer-events: none;
}
/* 单独恢复标题层内可点击元素的交互能力 */
.swiper-caption a, .swiper-caption button {
    pointer-events: auto;
}

原理是让标题层不响应鼠标事件，点击操作会直接穿透到下方的箭头，同时保留标题内部链接、按钮的可点击属性，对原有业务逻辑无任何影响。

方案2：移动箭头到swiper外部 #

swiper的导航按钮不强制要求嵌套在swiper组件内部，只要选择器能正常匹配到元素即可：

1. 调整HTML结构，把两个箭头元素从内部移到和swiper、.swiper-caption平级的位置：

<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>                
        </swiper>
        <!-- 箭头移到此处 -->
        <div class="swiper-btn-prev swiper-light"></div>
        <div class="swiper-btn-next swiper-light"></div>
        <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>

2. 微调箭头的CSS定位值，确保它相对于外层的.row定位正确即可，原有z-index:1000会直接生效，因为此时箭头和.swiper-caption处于同一个堆叠上下文。

方案3：调整平级元素堆叠顺序 #

如果不需要保留标题层覆盖轮播图其他区域的交互，可以直接调整平级元素的z-index：

.swiper {
    z-index: 2;
}
.swiper-caption {
    z-index: 3;
    pointer-events: none;
}

这种方案适合需要整体调整层级优先级的场景。

内容的提问来源于stack exchange，提问作者mlila_p