CSS Flexbox有问题

Question

我正在尝试在Navbar下方添加部分。我的问题是，如果我不添加位置：固定；顶部：50px（这是Navbar的高度），然后我部分的顶部被Navbar覆盖。

请告诉我我在做什么错。

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

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}


/* NAVBAR */

header {
  height: 51px;
  width: 100%;
  background-color: #f6f8f9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
}

h1 {
  color: #fa6980;
  font-size: 13;
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav>ul {
  display: flex;
  justify-content: space-evenly;
}

nav>ul>li {
  color: #343638;
  margin: 0 0.2rem;
  padding: 0.2rem;
  padding-top: 20px;
  display: block;
  font-size: 11px;
}


/* WORLD NEWS SECTION FLEXBOX */

.world-news {
  display: flex;
  height: 590px;
  width: 80%;
  margin: 0 auto;
}

.flex1 {
  width: 50%;
  background-image: url(./world\ news/image.png);
  height: 590px;
  padding-top: 15%;
  color: white;
  text-align: center;
}

.flex2 {
  width: 50%;
  height: 590px;
  background-color: white;
  padding-top: 15%;
}

<header>
  <h1 id="logo" class="bold">LOGO</h1>
  
  <nav>
    <ul>
      <li><a class="bold">HOME</a></li>
      <li><a class="bold">DISCOVERY</a></li>
      <li><a class="bold">PHOTOS</a></li>
      <li><a class="bold">CONTACT</a></li>
    </ul>
  </nav>
  
  <img src="https://via.placeholder.com/80" alt='profile pic sample' id='profile-pic' />
</header>

<section class="flex-box world-news">
  <div class="flex1">
    <div class="try">
      <h2 class="bold">WORLD NEWS</h2>
      <hr>
      <p class="bold">Lorem ipsum dolor sit amet, in eam odio amet, vix id nullam detracto vidit.</p>
      <img src="https://via.placeholder.com/60">
    </div>
  </div>

  <div class="flex2">
    <form>
      <label for="date" class="bold">Select a date</label>
      <input name='date' type="date" placeholder="Select...">
      <label for="keywords" class="bold">Enter the first keywords</label>
      <input name="keywords">
      <button class="bold">Search</button>
    </form>
  </div>
</section>

Answer 1

由于您的Navbar具有位置：固定它始终将位于顶部，并将覆盖其下面的所有内容。我建议您做的是将页面中的所有其他内容包装在＆lt; main＆gt;元素中，并给出该主要元素50px的填充。这样...

<header>
  Header content here
</header>
<main>
  <section>some content</section>
  <section>some content</section>
</main>

然后在您的CSS中...

main {padding-top: 50px}