内容覆盖标题

Question

我想对我的网站略有不同。我希望我的内容块覆盖一个标题，大约100px（屏幕截图中的示例） 我的JSFiddle有我的网络结构（我使用sections和bootstrap） 这是我的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>