内容叠加 header

Question

我想让我的网站有所不同。我希望我的内容块覆盖一个 header，大约 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

要将元素从当前位置向上移动 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>

内容叠加 header

Content overlays header

html

css

header

sections