Место div под div

Question

Наверное, очень простое решение.

У меня есть два контейнера дивы

.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> 

Answer 1

Я бы «т использовать верх, как об этом:

.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/

Answer 2

Для этого вы должны использовать z-index. имейте в виду, что div с высшим z-индексом будет сверху, поэтому я предлагаю добавить z-index: 2 для .topwrap и z-index: 1 .lowerwrap вы можете прочитать здесь: http://www.w3schools.com/cssref/pr_pos_z-index.asp