Content overlays header

Question

I want to make some little difference with my website. I wanted that my content block overlays a header, about 100px (example in screenshot) There's my JSFiddle with structure of my web (Im using a sections and bootstrap) This is my 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

To move an element up 100px from it's current position, use 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>