Как сделать чтобы основная часть была сзади меню,

Question

Как сделать чтобы div.main был сзади самой меню

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NewMax</title>
    <meta name="viewport" content="width=device-width">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
    <header>
        <nav class="navigation navbar d-none d-sm-none d-md-block">
            <div class="container-xl">
                <div class="left d-flex align-items-center">
                    <a class="navbar-brand my-2" href="#"><img src="img/Group%20246.svg" alt="logo"></a>
                    <p class="ua" class="">UA</p>
                    <p class="ru" class="">RU</p>
                    <img src="img/search.svg" class="ico-search" alt="1x1">
                    <input class="search" type="text" class="search" placeholder="Поиск">
                </div>

                <ul class="ul navbar-nav">
                    <img src="img/sun.svg" class="sun d-md-none d-lg-block" alt="sun">
                    <img src="img/moon.svg" class="moon d-md-none d-lg-block" alt="moon">
                    <button class="in">Войти</button>
                    <button class="out">Создать аккаунт</button>
                </ul>
            </div>
        </nav>
    </header>
    <nav class="phonee navbar d-flex d-md-none">
        <div class="container-fluid">
            <a class="navbar-brand my-2" href="#"><img src="img/Group%20246.svg" alt="logo"></a>
            <ul class="d-flex">
                <img src="img/sun.svg" class="sun d-md-none d-lg-block" alt="sun">
                <img src="img/moon.svg" class="moon d-md-none d-lg-block" alt="moon">
                <button class="menu" id="burger"></button>
            </ul>
        </div>
    </nav>

    <section class="vidvig d-md-none" id="vidvig">
        <ul class="d-flex flex-column align-items-start p-4">
            <div class="item">
                <img src="img/search.svg" class="ico-search2" alt="1x1">
                <input class="search" type="text" class="search" placeholder="Поиск">
            </div>
            <button class="item in2">Войти</button>
            <button class="item out2">Создать аккаунт</button>
        </ul>
    </section>

    <div class="container mt-4 main">123123</div>




    <script src="js/main.js"></script>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>



<!--<ul class="d-flex">-->
<!--    <li class="nav-item">-->
<!--    </li>-->
<!--    <li class="nav-item">-->
<!--    </li>-->
<!--</ul>-->

<!--<form action="#" class="form-inline">-->
<!--</form>-->


<!--<div class="themes d-flex nav-item">-->

<!--</div>-->
<!--<div class="user-log nv-item">-->

<!--</div>-->

Css:

*{
    margin: 0;
    padding: 0;
    color: white;

}
body {
    background-image: url(../img/Background.svg);
    background-color: #22252A;
    background-repeat: no-repeat;
    font-weight: 400;
}

/*///////////HEADER///////////*/
/*///////////HEADER///////////*/
/*///////////HEADER///////////*/


.navigation{
    background: #292C32;
}
.logo{

}

.ua{
    color: #A6A7A9;
    margin-left: 38px;
}
.ru{
    color: #03B898;
    margin-left: 20px;
}

.ico-search{
    margin-bottom: -2px;
    margin-left: 55px;
}
.ico-search2{
    margin-bottom: -2px;
}
.search{
    background: transparent;
    border: none;
    margin-left: 12px;
}

.sun{
    margin-right: 20px;

}
.moon{
    margin-right: 37px;
}

.in{
    height: 30px;
    width: 90px;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(0, 198, 142, 0.15);
    background: #00C68E;

    transition: .3s all;
}
.in:hover{
    background: #285A4C;
}
.in2{
    height: 30px;
    width: 90px;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(0, 198, 142, 0.15);
    background: #00C68E;

    transition: .3s all;
}
.in2:hover{
    background: #285A4C;
}


.out{
    height: 30px;
    width: 180px;
    border: 1px solid #51545B;
    box-sizing: border-box;
    background: transparent;

    backdrop-filter: blur(30px);

    border-radius: 4px;
    margin-left: 15px;

    transition: 0.3s all;
}
.out:hover{
    background: #6e7073;
}
.out2{
    height: 30px;
    width: 180px;
    border: 1px solid #51545B;
    box-sizing: border-box;
    background: transparent;

    backdrop-filter: blur(30px);

    border-radius: 4px;

    transition: 0.3s all;
}
.out2:hover{
    background: #6e7073;
}


.ul{
    display: flex;
    flex-direction: row;
}


.phonee{
    background: #292C32;

}
.menu{
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    background-image: url('../img/menu.svg');
    margin-right: 23px;
}

.item{
    margin-bottom: 15px;
}
.vidvig{
    background: #292C32;
    width: 100%;
    position: absolute;
    top: -100px;
    transition: all .5s;
    z-index: -1;
}
.vidvig.active{
    top: 72px;
}



/*///////////MAIN///////////*/
/*///////////MAIN///////////*/
/*///////////MAIN///////////*/

.main{
    z-index: -1;
}




/*///////////ADAPTIVE///////////*/
/*///////////ADAPTIVE///////////*/
/*///////////ADAPTIVE///////////*/

@media screen and (max-width: 1440px) {
    body {
        background-image: none;
    }
}

Js:

document.getElementById('burger').onclick = function() {
    document.getElementById('vidvig').classList.toggle('active');
};

БЛОГ НА HUSL

Как сделать чтобы основная часть была сзади меню,

Ответы (0 шт):