Html 我的div重叠了

这里是我的html和css。我的问题是，如果我不应用上边距，div会相互重叠，如果位置不是绝对的，div不会填充浏览器窗口。请提供任何帮助。PS我是html和css的新手，认为stackoverflow可以帮助我开发。 编辑： 帮助您评估的JS FIDLE代码。谢谢大家!

HTML

试试这个

CSS:

@font-face{
字体系列：克拉维卡；
src:url（klavika.woff）；
}
导航{
身高：5公分；
宽度：100%；
排名：0；
右：0；
背景色：rgba（242，242，242，1）；
位置：绝对位置；
}
/*ul{list style:none；float:right；}
li{显示：内联块；高度：3em；宽度：5em；垂直对齐：中间；文本对齐：中心；文本装饰：无；字体重量：400px；字体大小：25px；颜色：白色；字体样式：粗体；}
div#slider{高度：20em；宽度：100%；左侧：0；右侧：0；顶部：5em；背景色：rgba（220，220，220，1）；位置：绝对；}
LIA{文本装饰：无；颜色：rgba（1501,1）；}
li:hover{边框底部：3px实体；边框底部颜色：rgba（0216255,1）；}*/
导航a{
背景色：rgba（242，242，242，1）；
边框底部：3倍透明；
字体系列：克拉维卡；
显示：块；
填充物：2米2米1.65米1.5米；
文字装饰：无；
颜色：rgba（150、150、150、50）；
-webkit过渡：边框底部0.3s轻松，背景色0.4s轻松；
过渡：边框底部0.3s缓和，背景色0.4s缓和；
}
导航a：悬停{
边框底部：3倍实心；
边框底色：rgba（0、148、255、1）；
颜色：rgba（82、212、214、1）；
/*背景色：rgba（15050,50）*/
}
导航ul{
列表样式：无；
浮动：对；
保证金：0；
}
李{
显示：内联块；
身高：5公分；
}
部门标志{
浮动：左；
身高：5公分；
宽度：8em；
左侧边缘：5em；
不透明度：.3；
-webkit转换：不透明度1s轻松；
}
div#徽标：悬停{
不透明度：100
}
img.logo{
最大宽度：100%；
最大高度：100%；
不透明度：10；
}
分区#主容器{
身高：5公分；
宽度：100%；
排名：0；
左：0；
右：0；
背景色：rgba（242，242，242，1）；
位置：绝对位置；
}
div#滑块{
背景色：红色；
宽度：100%；
位置：绝对位置；
右：0；
左：0；
高度：15公分；
边缘顶端：5em；
}

如果要填充没有绝对位置的窗口，请将主体边距设置为0

从#主容器和#滑块中删除绝对位置，然后可以从#滑块中删除边距顶部

div正在折叠，因为其中没有内容，请尝试添加以下内容：

body { 
  margin:0; 
}
.containers {
    height:50px;
    background: blue;
    margin-top: 5px;
}

---

现在您将看到您的4个容器

完成了！谢谢你的回复，但不幸的是，这没有成功。我用div作为容器，导航用nav。无论如何谢谢你的帮助：）我误解了这个问题。如果有帮助，请参阅编辑。谢谢。成功了。但仍然是一个边缘。：）

@font-face{
  font-family: klavika; src:url(klavika.woff);
}

div#nav{
   height: 5em;
   width: 70%; 
   top: 0;
   right:0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

/*ul{list-style: none; float: right;}

li{
   display: inline-block;
   height: 3em;
   width: 5em;
   vertical-align: middle;
   text-align: center;
   text-decoration: none;
   font-weight: 400px;
   font-size: 25px;
   color: white;
   font-style: bold;
 }

div#slider{
   height: 20em;
   width: 100%;
   left: 0; 
   right: 0;
   top: 5em;
   background-color: rgba(220, 220, 220, 1);
   position: absolute;
 }
li a{
  text-decoration: none;
  color: rgba(150,150,150,1);
 } 
li:hover{
 border-bottom: 3px solid;
 border-bottom-color: rgba(0, 216, 255, 1);}*/

nav a{
  background-color: rgba(242, 242, 242, 1);
  border-bottom: 3px transparent;
  font-family: klavika;
  display: block;
  padding: 2em 2em 1.65em 1.5em;
  text-decoration: none; 
  color: rgba(150,150,150,50);
 -webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
  transition: border-bottom 0.3s ease, background-color 0.4s ease;
 }

nav a:hover{
  border-bottom: 3px solid;
  border-bottom-color: rgba(0, 148, 255, 1);
  color: rgba(82, 212, 214, 1);
  /*background-color: rgba(150,150,150,50);*/
 }

nav ul{
 list-style: none;
 float: right; 
 margin: 0;
}

li{
 display: inline-block;
 height: 5em;
}

div#logo{
   float: left; 
   height: 5em;
   width: 8em;
   margin-left: 5em;
   opacity: .3; 
  -webkit-transition:opacity 1s ease;
}

div#logo:hover{opacity: 100}

img.logo{max-width: 100%; max-height: 100%; opacity: 10;}

div#maincontainer{
   height: 5em;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

div#slider{
   background-color:red;
   width: 100%;
   position: absolute;
   right: 0;
   left: 0;
   height: 15em;
   margin-top: 7em;
}

body { 
  margin:0; 
}
.containers {
    height:50px;
    background: blue;
    margin-top: 5px;
}