Question

所以我很困惑div如何连接，父母必须是亲戚（或固定????），孩子必须是绝对的，但我想要一个与此网站相同的顶级菜单，这意味着我需要使用属性的顶部菜单div 位置：绝对; 顶部：0px; 但是这意味着如果将其设置为相对

，则无法将下方的div刷新到顶部菜单

＆＃13;

react-router

＆＃13;

v1.0.1-myname

＆＃13;

我真的不想用上：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 -->

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

1 个答案: