Place div under div - html

Question

Probably a really simple solution.
I have two container divs
.topwrap{
position:relative;
top:100px;
background:#00C;
}
and
.lowerwrap{
position:relative;
top:100px;
background:#00C;
}
but .lowerwrap for some unknown reason keeps staying above .topwrap. Within those two containers are images etc that are positioned correctly. Its just that I cant get .lowerwrap to go directly below .topwrap
Sorry if I havent explained it all properly.
Kind regards
(full code)
/*---------------------------- 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>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</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>

Answer 1

I wouldn't use top, how about this:
.topwrap{
clear: both;
position:relative;
float: left;
background:#EEE;
margin-top: 100px;
}
.lowerwrap{
position:relative;
float: left;
background:#555;
display: block;
}
I created a simple fiddle here:
https://jsfiddle.net/6xj5snv2/

Answer 2

you have to use z-index to achieve that. keep in mind that the div with the higher z-index will be on top so i suggest to add z-index:2 for .topwrap and z-index:1 .lowerwrap you can read more here: http://www.w3schools.com/cssref/pr_pos_z-index.asp