如何水平堆叠div?

时间:2019-10-23 13:53:24

标签: html css

我正在设计一个包含多个div的网页。我需要一个div堆叠另一个。我怎样才能做到这一点? 当前,该网站上的导航栏与一个div重叠

这是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 个答案:

没有答案