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

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

看看这个小提琴，我认为这就是你想要的 - 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;
}

Answer 2

＆＃13;

＆＃13;

#firstlink {
  padding: 15px 50px 0px 0px
}
#linkbar {
      background-color: blue;
      width: 100%;
      height: 15%;
      display: inline-block;
}
ul{
  list-style-type:none;
  padding: 0px;
  margin: 0px;
  float: right;
}
ul li {
  font-size: 35px;
  padding: 15px 10px 0px 0px;
  display: inline-block;
}
#aboutme {
  padding: 75px 0px 0px 0px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;