html - ディビジョンが定位置にない

Question

この div がヘッダーの下にない理由がわかりません。h1要素と関係があることは知っていますが、何がうまくいかないのですか。

フィドル

HTML:

<header>

    <section class="topbar"></section>

</header>


<section class="hero">

    <div class="search">
        <div class="ten columns">
            <div class="container">
                <h1>dgd</h1>
            </div>
        </div>
    </div>
    <div class="hero-img"></div>

</section>

CSS:

body {
font-family: Helvetica, Arial, sans-serif;
}

header {
background: #34363e;
height: 120px;
border-bottom: 5px solid black;
}

.hero {
width: 100%;
}

.topbar {
background: #4093c1;
height: 15px;
}

.hero-img {
max-width: 100%;
vertical-align: middle;
margin: 0;
    background:red;
    height: 300px;
position: relative;
} 

 .search {
position: relative;
top: 80px;
z-index: 100;
 }

赤いボックスをヘッダーの下部に「スタック」させたい。