html - 包含文本的部分与包含无序列表的部分重叠

Question

这里是全新的 html/css 用户!我确信有一种简单而优雅的方法可以解决这个问题，但我一直没能找到。

目前我的代码中有四个部分，后三个部分之间的关​​系似乎完全符合我的预期，一个接一个，但第二个部分重叠在第一个部分之上。我已经通过向第二部分添加一个 id 来为其提供一些填充来解决这个问题，但正如您会注意到的那样，它是从页面顶部填充的，而不是从它上面的部分填充的。如果我去掉该填充，“关于我”会重叠在包含链接的第一部分的背景之上。

#firstlink {
  padding: 15px 50px 0px 0px
}
#linkbar {
      background-color: blue;
      height: 15%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
}
li {
  font-size: 35px;
  padding: 15px 10px 0px 0px;
  float: right;
  display: inline;
}
#aboutme {
  padding: 75px 0px 0px 0px;
}

<section id="linkbar">
  <ul>
    <li id="firstlink">link1</li>
    <li>link2</li>
    <li>link3</li>
  </ul>
</section>
<section id="aboutme">
  <h1>About Me</h1>
</section>
<section>
  <h1>My Portfolio</h1>
</section>
<section>
  <h1>Contact Me</h1>
</section>

Answer 1

看看这个 fiddle ，我想这就是你想要的 - https://jsfiddle.net/swarn_singh/tv25eq3g/

#firstlink {
  padding: 15px 50px 0px 0px
}
#linkbar {
      background-color: blue;
      height: 15%;
      top: 0;
      left: 0;
      width: 100%;
}
li {
  font-size: 35px;
  padding: 15px 10px 0px 0px;
  float: right;
  display: inline;
}
.clear{
  clear: both;
}