부서 위치에 머무르지 않습니다.

Question

이 부서가 헤더 아래에 머무르지 않는 이유는 무엇인지 알 수 없습니다. 나는 그것이 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; 
}