html - 如何将主要内容放在固定标题下？

Question

对于我的类(class)，我们必须使用定位和导航栏。我们目前必须重新创建一个 photoshop 图像。

要求如下:将导航放在粉红色标题上，将该标题放在固定位置。

我知道要将内容放在标题下，AKA leaving some space and then continue with the contents of the webpage.我似乎很难得到这个“内容框”。我怎样才能做到这一点？

header {
  position: fixed;
  width: 1366px;
  height: 100px;
  top: 0;
  background-color: rgb(205, 99, 105);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 20px;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
  text-align: center;
}

.navigatie-midden li {
  display: inline;
  margin-left: 10px;
}

main {
  position: absolute
  margin: 0 auto;
  width: 400px;
  border: solid 1px;
}

<header>
  <ul class="navigatie-midden">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About </a></li>
    <li><a href="#"> Portfolio </a></li>
    <li><a href="#"> Archive </a></li>
    <li><a href="#"> Resources </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</header>

<main>
  Content
</main>

Answer 1

你快到了。您所需要的只是main 的上边距。我添加了额外的内容，这样您就可以在滚动时看到它是如何工作的。标题下的内容将消失。

header {
  position: fixed;
  width: 1366px;
  height: 100px;
  top: 0;
  background-color: rgb(205, 99, 105);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 20px;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
  text-align: center;
}

.navigatie-midden li {
  display: inline;
  margin-left: 10px;
}

main {
  width: 400px;
  border: solid 1px;
  margin-top: 100px;
}

<header>
  <ul class="navigatie-midden">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About </a></li>
    <li><a href="#"> Portfolio </a></li>
    <li><a href="#"> Archive </a></li>
    <li><a href="#"> Resources </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</header>

<main>
  <p>Content 1</p>
  <p>Content 2</p>
  <p>Content 3</p>
  <p>Content 4</p>
  <p>Content 5</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</main>