Navbar bootstrap

Добрый день! Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним. Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в 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>
Изображения:

Комментарии: 3

Александр Мальцев
Александр Мальцев
Здравствуйте!
Это определяют стили (CSS), которые вы добавляете к элементам с помощью классов.
Чтобы разобраться почему у вас так получилось, вам необходимо разобраться с этими стилями.

Это ситуация возникает когда вы «вырываете» элемент из потока и не можете его корректно расположить на странице. При этом элементы, которые находятся вне потока можно двигать по оси Z, т.е. приближать их к себе, либо отдалять их от себя. В вашем случае у элементов, если наблюдается такая картина, не правильно выставлено значение CSS-свойства z-index.

Если есть желание разобраться, то прочитайте статью про способы позиционирования элементов в CSS.
D2207
D2207
Добрый вечер!
Перебирал все CSS классы у навбара и кнопок, все они знакомые и ни один не помог.
Перечитал статью, в статье как раз нашёл то что нужно, прописал z-index: -1 к class=«btn_holder» — ситуация исправилась. Теперь отображается как надо. Но честно говоря, мне это не нравиться, «костыль» какой-то получается. Не красиво.
Насколько я понимаю навбар в принципе «вырван» из потока потому что он «fixed to the top». Если ли какой-то способ избежать моей ситуации, просто прописывать костыли к контенту это не дело?
Спасибо
Александр Мальцев
Александр Мальцев
Добрый день!
Тут вам нужно разбираться с макетом, который вы используете и изменить его, если в нём есть недочёты, чтобы не добавлять новые стили для правки этих ситуаций.
А так да, если navbar имеет fixed-top, то он конечно будет вырван из потока. Но в вашем случае z-index у .btn_holder больше чем у navbar, если он располагался таким образом. Но такого элемента как .btn_holder в самом Bootstrap нет, поэтому это конечно связано не с самим Bootstrap, а с решением, которые вы используете.