html - Div 没有停留在原位

Question

我不明白为什么这个 div 没有留在标题下面。我知道这与 h1 元素有关，但不知道是什么。

Fiddle

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;
 }

我希望红色框“固定”在页眉底部。

Answer 1

像这样更改您的 CSS 以将红色框卡在标题的底部

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

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

.hero {
width: 100%; 
position:relative;
}

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

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

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