覆盖不覆盖整个头

Question

我真的不知道如何字这个问题，但我会尽力。所以，我试图让在背景图像的顶部覆盖，头部本身占用了100vh，但是当我把与图像覆盖在内，从NAV一些填充正在推动的背景颜色向下跌破视口看起来。我试图采取保证金关闭导航元素和它带来的背景了一点，但不是一路人。也许我失去了一些东西很简单的在这里，但我似乎无法让我的头周围。

下面是对codepen的链接（我知道代码是有点乱的，它只是一个测试）：https://codepen.io/Jmp93/pen/BMJwov

<nav id="main-nav">
    <h3>TEST|Web</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <header>
    <h1>Test Text Sample</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
      sapiente animi quas earum?</p>
  </header>

  <section id="start-section">
    <div class="container">
      <h1 class="m-heading">Some Text</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
        reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
        eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
    </div>
  </section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #333;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

.m-heading {
  font-size: 2rem;
  margin-bottom: .75rem;
}

.lead {
  font-size: 1.2rem;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100vh;
  text-align: center;
}

header:before {
  content: '';
  background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
}

header h1 {
  font-size: 4rem;
  margin: 1rem;
}

#main-nav {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  justify-content: space-between;
}

#main-nav h3 {
  font-size: 2rem;
  margin: 2rem;
}

#main-nav ul {
  display: flex;
  justify-items: center;
  font-size: 1.2rem;
  margin: 2rem;
}

#main-nav ul li {
  list-style: none;
}

#main-nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 1rem;
}

#main-nav ul li a:hover {
  background: #444;
  border-radius: 25px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

#start-section {
  background: #fff;
  color: #000;
  text-align: center;
}

任何帮助，将不胜感激，谢谢。

Answer 1

只是尽量的相对位置适用于头本身:)通常，如果你使用绝对的位置，包含它的主要元素相对应。即使绝对元件被定位在其父代的宽度和高度的100％，而不是浮在不参考的正确方法。