【新手请教】请问我的代码出了什么问题？为什么上部和左侧图案会重叠在一起？_html/css_WEB-ITnose

#header{
height:50px;
width:100%;
border:1px solid black;
border-radius:5px;
background:green;
padding:40px;
position:fixed;
z-index:1;
margin-bottom:10px;
}
#header p{display:inline;margin-left:20px;}
.left{
height:100px; 
margin-top: 50px;
width:30%;
background-color:yellow;
border-radius:5px;
border:1px solid black;
float:left;
position:relative;
}
.right{
height:100px;
width:70%;
background-color:blue;
border-radius:5px;
border:1px solid black;
float:right;
}
#footer{
height:50px;
width:100%;
border:1px solid black;
border-radius:5px;
background:#ff0000;
padding:40px;
clear:both;
}

范例代码（节取）
#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
}

}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}

.right {
position: relative;
float: right;
margin-top: 50px;
width: 88%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}

回复讨论(解决方案)

因为#header 中的  position: fixed; 

因为#header 中的  position: fixed; 

position改为相对之后，确实不再重叠了。可是这节课的内容就是使用position和float…而且为什么例题里面同样使用了“固定位置”，却没有出现同样的问题呢？

答： 30 %  + 70% = 100% 
但是你有边框并给了值，因此会超出100%，就变成这个样子了。

答： 30 %  + 70% = 100% 
但是你有边框并给了值，因此会超出100%，就变成这个样子了。

这个值其实我改了后来，但是会变成黄块和红块会一起躲到绿块后面。

答： 30 %  + 70% = 100% 
但是你有边框并给了值，因此会超出100%，就变成这个样子了。

不好意思打错了，是黄块和蓝块躲到绿块后面，只能看到绿块和红块。

答： 30 %  + 70% = 100% 
但是你有边框并给了值，因此会超出100%，就变成这个样子了。

变成这样：