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

user_15513031 0
Viewed 204

HEY Geeks I hope everyone is doing great. I'm facing an issue that is related to CSS, AS I'm new to the CSS or front-end side so needs your undivided attention on this. ANY SUGGESTION Or HINT Will be appreciated. Here is my case:

  1. I'm Creating a demo site for an e-commerce store. The navigation bar is simple and has 4 elements: Home, About us, shop, and contact us. The shop is further classified into three sub-items i.e. a,b and c. You can directly scroll down at the end to see the actual problem (picture is attached). I want to bring that sub-menu Infront instead of the background.

The code for navbar is included here jsfaddle

2- There is a carousel or slider that I have created using " " components the Html and CSS code for the slider is given below:

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

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

Following is the output by which you can easily understand what is the problem I'm facing.

enter image description here

carousel vuetify.js vue.js css html
1 Answers

are you familiar with stacking context issue? I believe v-carousel-item creates stacking context in its content, so z-index:-1 of img is relevant only to carousel item content. You should try set z-index position of dropdown instead.

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