콘텐츠 오버레이 헤더

Question

제 웹 사이트와 약간의 차이를 만들고 싶습니다. 나는 내 콘텐츠 블록이 이 이동

.header{ 
    background:lightblue; 
    width:100%; 
    height:200px; 
} 

section.green{background:green} 
section.red{background:red} 

section{ 
    width:100%; 
} 

section .container{ 
    background:white; 
    width:80%; 
    height:700px; 
    margin:0 auto; 
} 

Answer 1

내 CSS한다 (A sections 및 부트 스트랩을 사용하여 임) 헤더 약 100 픽셀 (화면 예) 내 웹의 구조 내 JSFiddle을있다 오버레이 것을 원했다 그것에서 100 픽셀 최대 요소는 현재 위치, 사용의 transform: translateY(-100px);

.header{ 
 
    background:lightblue; 
 
    width:100%; 
 
    height:200px; 
 
} 
 

 
section.green{background:green} 
 
section.red{background:red} 
 

 
section{ 
 
    width:100%; 
 
} 
 

 
section .container{ 
 
    background:white; 
 
    width:80%; 
 
    height:700px; 
 
    margin:0 auto; 
 
    transform: translateY(-100px); 
 
}

<div class="header"> 
 

 
</div> 
 

 
<section class="green"> 
 
    <div class="container"> 
 
    section 1 content 
 
    </div> 
 
</section> 
 

 
<section class="red"> 
 
    <div class="container"> 
 
    section 2 content 
 
    </div> 
 
</section>