NAV Bar li 元素显示在轮播后面 | vue.js 验证 css

Question

嘿极客们我希望每个人都做得很好。我面临与 CSS 相关的问题，因为我是 CSS 或前端方面的新手，因此需要您全神贯注。任何建议或提示将不胜感激。这是我的案例：

我正在为电子商务商店创建一个演示站点。导航栏很简单，有 4 个元素：主页、关于我们、商店和联系我们。该商店进一步分为三个子项目，即 a、b 和 c。你可以在最后直接向下滚动查看实际问题（附图）。我想带那个子菜单 Infront 而不是背景。

这里包含导航栏的代码jsfaddle

2- 我使用“”组件创建了一个旋转木马或滑块，下面给出了滑块的 Html 和 CSS 代码：

    <template>
  <div class="homeCon">
      <v-carousel v-model="model" >
        <v-carousel-item v-for="(img, index) in images" :key="index" class="color" style="position:absolute;">
          
            <img :src="img.url" :alt="img.alt">
               <v-btn rounded class="c-btn"  dark> SHOP NOW </v-btn>
        </v-carousel-item>
    </v-carousel>
     </div>
</template>

CSS 代码

.homeCon {
margin-top: 0px;
}
.homeCon  img{
  width:100%;
  height: 100%;
  opacity: 0.8;
  filter: sepia(0%);
  margin-left: auto;
  margin-right: auto;
  z-index: -1;

}
.homeCon .c-btn{
    margin-top: 120px;
    overflow: auto;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 10%;
    width: 320px;
    color: black;
    background-color: rgb(230, 230, 59);
    
}
.homeCon .c-btn:hover{
background-color: rgb(236, 183, 35);
color: white;
}

以下是输出，您可以通过它轻松了解我面临的问题。

Answer 1

你熟悉stacking context issue吗？我相信 v-carousel-item 在其内容中创建了堆叠上下文，因此 z-index:-1 of img 仅与轮播项目内容相关。您应该尝试设置下拉菜单的 z-index 位置。

 .mynav .navbar .dropdown-content {
      z-index:99
 }

NAV Bar li 元素显示在轮播后面 | vue.js 验证 css

NAV Bar li element is showing behind carousel | vue.js vuetify css

html

css

carousel

vue.js

vuetify.js