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

Div没有留在原地

1 个答案: