html - 将div放在div下

可能是一个非常简单的解决方案。

我有两个容器div

.topwrap{
    position:relative;
    top:100px;
    background:#00C;

}



和

.lowerwrap{
    position:relative;
    top:100px;
    background:#00C;
}

但是.lowerwrap出于某些未知原因一直保持在.topwrap之上。在这两个容器中的是正确放置的图像等。只是我无法让.lowerwrap直接在.topwrap下

抱歉，如果我没有正确解释所有内容。

亲切的问候

（完整代码）

/*---------------------------- Header ----------------------------*/
.headerwrap{
    position:relative;
}
.header{
    position:relative;
    width:100%;
    z-index:1;
}
.header img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.logo{
    position: absolute;
    float:left;
    width:15%;
    top:5%;
    left:43%;
    z-index:10;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*---------------------------- Main Work ----------------------------*/
.menu{
    width:100%;
    top:0px;
    z-index:200;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li{
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a{
    color:#A11D22;
    transition:300ms;
}
li a:hover {
    color:#999;
}
.menutxt{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size:2.5vw;
    color:#A11D22;
    font-weight:bold;
    z-index:3000;
}
/*----------------------------Top ----------------------------*/
.topwrap{
    position:relative;
    background:#00C;
    height:auto;
}
.face{
    position:relative;
    width:20%;
    float:right;
    right:15%;
    background:#00C;
}
.face img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.speech{
    position:relative;
    width:50%;
    float:right;
    right:15%;
    background:#00C;
}
.speech img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
    position:relative;
    background:#00C;
}

<!--===================================================Header===================================================!-->
    <div class="headerwrap">
        <div class="header">
                <img src="images/header.png" />
            <div class="logo">
                <img src="images/logo.png" />
            </div><!--close logo-->
            <div class="menu">
                <ul class="menutxt">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">PORTFOLIO</a></li>
                    <li><a href="manga.html">CONTACT</a></li>
                </ul>
            </div><!--close menu-->
        </div><!--close header-->
    </div><!--close headerwrap-->
 <!--===================================================Top===================================================!-->
    <div class="topwrap">
        <div class="face">
            <img src="images/face.png"/>
        </div><!--close face-->
        <div class="speech">
            <img src="images/speech.png"/>
        </div><!--close speech-->
    </div><!--close topwrap-->
<!--===================================================Lower===================================================!-->
    <div class="lowerwrap">
        <p>dsadsadasd</p>
    </div><!--close topwrap-->
</body>
</html>

最佳答案

我不会用top，这是怎么回事：

.topwrap{
    clear: both;
    position:relative;
    float: left;
    background:#EEE;
    margin-top: 100px;
}

 .lowerwrap{
    position:relative;
    float: left;
    background:#555;
    display: block;
}

我在这里创建了一个简单的小提琴：
https://jsfiddle.net/6xj5snv2/