覆盖不覆盖整个标题

Question

我不太确定如何表达这个问题，但我会尝试。 所以，我试图在背景图像的顶部进行叠加，标题本身占用 100vh，但是当我放置包含图像的叠加层时，导航中的一些填充将背景颜色推到下方视口似乎。我试图从导航元素中删除边距，它使背景上升了一点，但不是一直。也许我在这里遗漏了一些非常简单的东西，但我似乎无法理解它。

这是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% 并且在没有参考的情况下不浮动的正确方法。