Содержимое наложения заголовка

Question

Я хочу немного изменить свой сайт. Я хотел, чтобы мое содержание блок перекрывает заголовок, о 100px (пример на скриншоте) Там в моей JSFiddle структуре моего веб (Im использованием sections и самозагрузки) Это мой CSS

.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

Для перемещения элемент до 100px от его текущей позиции, используйте 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>