Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним.
Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в div который обёрнут в div с пикчей, пикча под навбаром, а кнопка — над. Я почти все компоненты не пишу сам, а адаптирую чужие под свои нужды и из-за этого упускаю ошибку. Мне кажется что всё дело в class`ах, возможно они как-то конфликтуют и движок не понимает что ему рисовать.

кусок вёрстки содержащий кнопки
<template> <v-layout class="product_holder"> <div> <v-text-field clearable type="text" v-model="search" label="Поиск" prepend-icon="mdi-magnify"> </v-text-field> </div> <div v-for="product in getFilteredProductList" class="product"> <div class="product_img_holder"><img class="product_img" :src="product.img" alt="iphone 10"/></div> <div class="product_info"> <span>{{product.title}}</span> <span>{{product.price}}</span> <span>{{product.description}}</span> </div> <div class="btn_holder"> <v-btn style="background-color: rgba(126,7,113,0.66)" class="button is-success" @click="addToCart(product)"> <v-icon dark left> {{'mdi-basket-fill'}} </v-icon> купить </v-btn> <v-btn style="background-color: rgba(7,2,126,0.66)" @click="goToAboutPage"> описание </v-btn> </div> </div> </v-layout> </template>
кусок вёрстки содержащий навбар
<template> <nav class="navbar navbar-expand-lg"> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <nuxt-link no-prefetch exact active-class="active" class="nav-link" to="/"> Home </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/About"> About </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/Catalog"> Catalog </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/users"> Users </nuxt-link> </li> <li class="nav-item" v-if="!hasToken"> <nuxt-link active-class="active" class="nav-link" to="/Login"> Login </nuxt-link> </li> <li class="nav-item" v-else> <a @click.prevent="logout" class="nav-link" href="#"> Logout </a> </li> <li class="nav-item" style="padding-left: 30%"> <v-text-field clearable dark type="text" v-model="search" label="Поиск" prepend-icon="mdi-magnify"> </v-text-field> </li> </ul> </div> </nav> </template>
Это определяют стили (CSS), которые вы добавляете к элементам с помощью классов.
Чтобы разобраться почему у вас так получилось, вам необходимо разобраться с этими стилями.
Это ситуация возникает когда вы «вырываете» элемент из потока и не можете его корректно расположить на странице. При этом элементы, которые находятся вне потока можно двигать по оси Z, т.е. приближать их к себе, либо отдалять их от себя. В вашем случае у элементов, если наблюдается такая картина, не правильно выставлено значение CSS-свойства z-index.
Если есть желание разобраться, то прочитайте статью про способы позиционирования элементов в CSS.
Перебирал все CSS классы у навбара и кнопок, все они знакомые и ни один не помог.
Перечитал статью, в статье как раз нашёл то что нужно, прописал z-index: -1 к class=«btn_holder» — ситуация исправилась. Теперь отображается как надо. Но честно говоря, мне это не нравиться, «костыль» какой-то получается. Не красиво.
Насколько я понимаю навбар в принципе «вырван» из потока потому что он «fixed to the top». Если ли какой-то способ избежать моей ситуации, просто прописывать костыли к контенту это не дело?
Спасибо
Тут вам нужно разбираться с макетом, который вы используете и изменить его, если в нём есть недочёты, чтобы не добавлять новые стили для правки этих ситуаций.
А так да, если navbar имеет fixed-top, то он конечно будет вырван из потока. Но в вашем случае z-index у .btn_holder больше чем у navbar, если он располагался таким образом. Но такого элемента как .btn_holder в самом Bootstrap нет, поэтому это конечно связано не с самим Bootstrap, а с решением, которые вы используете.