html - div没有留在原位

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

我希望红色框“卡”在标题的底部。

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