Я проектирую веб-страницу с несколькими элементами. Мне нужно сложить div один над другим. Как я могу это сделать? В настоящее время один div перекрывается с navbar на веб-сайте.

Вот HTML-код

    <body>
        <div class="main">
            <div class="main-banner">

                <!--- Nav Menu-->
                <div class="nav-menu"> 
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="aboutus.html">About us</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="services.html">Contact us</a></li>

                    </ul>
                <!-- First Banner-->
                <div class="heading">
                    <div class="animation">
                        <h1>India's first startup<br> consultancy.</h1>
                    </div>
                </div>
                <div class="sub-head">
                <h2>
                    For the startup.<br>
                    By the startup.<br>
                    Of the startup. <br>
                </h2>
                </div>
            </div>

            <!--Seccond Banner-->
            <div class="about">
                <h2>
                    Place holder text
                </h2>
            </div>





        </div>
    </body>
</html>

и мой код CSS для таблицы стилей, которая содержит стили div, упоминается ниже:

*{
    padding: 0;
    margin: 0;
}
body{
    background: White;
    padding: none;
    margin: none;
    border: none;
}

.main-banner{
    display: inline-block;
    position: fixed;
    background: #6ebdff;
    color: white;
    width: 100%;
    height: 100%;
}

.about{
    display: inline-block;

    background: #6c00a6;
    color: white;
    width: 100%;
    height: 100%;
}

Я хочу разместить "о" после "основного баннера" div

0
mridushyamal