Html 包含文本的节与包含无序列表的节重叠

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

目前，我的代码中有四个部分，后三个部分似乎完全符合我的预期，一个接一个地相互关联，但第二个部分与第一个部分重叠。我通过向第二部分添加一个id来解决这个问题，这给了它一些填充，但正如您所注意到的，它是从页面顶部填充的，而不是从页面上方的部分填充的。如果我去掉这些空白，“关于我”会重叠在包含链接的第一部分的背景之上

#firstlink{
填充：15px 50px 0px 0px
}
#链接栏{
背景颜色：蓝色；
身高：15%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
李{
字体大小：35px；
填充：15px 10px 0px 0px；
浮动：对；
显示：内联；
}
#关于我{
填充：75px 0px 0px 0px；
}

链接1
链接2
链接3

关于我
我的投资组合
联系我

看看这把小提琴，我想这是你想要的-

#firstlink{
填充：15px 50px 0px 0px
}
#链接栏{
背景颜色：蓝色；
宽度：100%；
身高：15%；
显示：内联块；
}
保险商实验室{
列表样式类型：无；
填充：0px；
边际：0px；
浮动：对；
}
ulli{
字体大小：35px；
填充：15px 10px 0px 0px；
显示：内联块；
}
#关于我{
填充：75px 0px 0px 0px；
}

链接1
链接2
链接3

关于我
我的投资组合
联系我

感谢您的快速回复。我试着从链接栏中删除绝对值，但是如果我从链接栏中删除填充，它仍然与顶部部分重叠，并且如果我从链接栏中删除绝对值，背景色消失，这似乎不能解决重叠问题，好像我删除了浮动：对，然后删除#about的填充，重叠仍然存在，此外，它会将我的链接从我想要的位置移开

#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;
}