我正在研究网页设计，我总是假设相对定位的 div，总是按照它们的编码方式排序。但是现在我有一个 div 跳到另一个之上，尽管它们都是相对的。
问题截图:
这是我的index.html的代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
<a href="Index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
这是我的布局 css 代码:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
到目前为止我的导航 css 代码，虽然我不认为问题出在这里:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
最佳答案
@Adrift 几乎答对了，但他提到了错误的 div。 overflow 属性应该在 HeaderContainer 上。
div#HeaderContainer {
position: relative;
overflow: auto;
}
我已经用结果为您创建了一个 jsfiddle。您可能希望将其添加到以下任何问题中，因为它可以让我们更轻松地检测到问题。
更多背景信息；一旦图像 float ，它就不再在文档中，因此不会保留它自己的高度。一个叫做 clearfix 的技巧可以用来防止它，但它是使用 overflow: auto; 或 overflow: hidden;
关于html - 通过相对位置定位div元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20849170/