html - div设置为相对但不能刷新到页面顶部

Question

所以我对 div 的连接方式感到非常困惑，父级必须是相对的(或固定的？？？？)而子级必须是绝对的，但我想要一个与本网站相同的顶部菜单，这意味着我需要制作具有以下属性的顶部菜单 div position:absolute； 顶部:0px； 但这意味着如果设置为相对，我无法将下面的 div 刷新到顶部菜单

html, body {
	background-color: #E8E8E8;
}
/* Div Body Start */
#container {
	width: 100%
	height: 100%;

}

#topmenu {
	position: absolute;
	opacity: 0.6; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */
  
    top: 0px;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
	background-color: black;
	color: white;
}
#topmenu:hover {
    opacity: 1; /* css standard */
    filter: alpha(opacity=100); /* internet explorer */
}

#banner {
   	position: absolute;
	clear: both;
    left: 0;
    right: 0;
    width: 750px;
    height: 100px;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	border-top: 5px solid black;
	
	background: #00015E; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#00015E, #3943FF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00015E, #3943FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00015E, #3943FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00015E, #3943FF); /* Standard syntax */
	

	height: 15%
 
}
/* Div Body End */
/* Top Menu Script Start */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visable;
    background-color: black;
	height: 50px;
	border-bottom: 5px solid black;
	  margin:auto;
	  display:block;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: lime;
}
/* Top Menu Script End */

<div id="container">
<div id="topmenu">
<ul>

  <li><a href="#">Skills</a></li>
  <li><a href="#contact">Education</a></li>
  <li><a href="#news">Work</a></li>
  <li><a href="#contact">Hobbys</a></li>
   <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="index.html"><img class="topimages" src="images/icons/icon-home1.png" width="35" height="35"></a></li>
</ul>
</div><!-- End topmenu -->
<div id="banner">


</div>
</div><!-- End container -->

我真的不想用 顶部:55px； 从屏幕上看，因为当向下滚动页面时，它会变得很奇怪 我搜索过这种情况，但我找不到任何答案，可能看起来不够好......谢谢大家!

Answer 1

从正文中删除填充和边距，并以正常方式定位子菜单，对我来说在 FF、Chrome、IE 中工作正常:

html, body {
	background-color: #E8E8E8;
	padding: 0;
	margin: 0;
}
/* Div Body Start */
#container {
	width: 100%
	height: 100%;

}

#topmenu {
	opacity: 0.6; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */

    width: 100%;
    height: 70px;
	background-color: black;
	color: white;
}
#topmenu:hover {
    opacity: 1; /* css standard */
    filter: alpha(opacity=100); /* internet explorer */
}

#banner {
   	position: absolute;
	clear: both;
    left: 0;
    right: 0;
    width: 750px;
    height: 100px;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	border-top: 5px solid black;
	
	background: #00015E; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#00015E, #3943FF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#00015E, #3943FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#00015E, #3943FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#00015E, #3943FF); /* Standard syntax */
	

	height: 15%
 
}
/* Div Body End */
/* Top Menu Script Start */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visable;
    background-color: black;
	height: 50px;
	border-bottom: 5px solid black;
	  margin:auto;
	  display:block;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: lime;
}
/* Top Menu Script End */

<div id="container">
<div id="topmenu">
<ul>

  <li><a href="#">Skills</a></li>
  <li><a href="#contact">Education</a></li>
  <li><a href="#news">Work</a></li>
  <li><a href="#contact">Hobbys</a></li>
   <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="index.html"><img class="topimages" src="images/icons/icon-home1.png" width="35" height="35"></a></li>
</ul>
</div><!-- End topmenu -->
<div id="banner">


</div>
</div><!-- End container -->