将 div 放在 div 下

Place div under 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>

你必须使用 z-index 来实现。请记住，具有较高 z-index 的 div 将位于顶部，因此我建议为 .topwrap 添加 z-index:2 和 z-index:1 .lowerwrap 您可以在此处阅读更多信息：http://www.w3schools.com/cssref/pr_pos_z-index.asp

我不会用top，这个怎么样：

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

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

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