我有一个header div，里面还有header-left-box和header-right-box向左浮动并水平并排放置。
在这些之后我想放置一个 div receiver 来占用下面的空闲空间。
问题是 receiver div 没有显示在另一个 div 之下，它在其他 div 之上，“重叠”。我该怎么办？我希望 receiver 低于其他 div。
代码如下:
<html>
<head>
<style type="text/css">
#header {
position: absolute;
width: 100%;
height: 30%;
margin: 0 auto;
}
#header-left-box {
position: absolute;
float: left;
width: 40%;
height: 100%;
margin-left: 0px;
border: 1px solid blue;
}
#header-right-box {
position: absolute;
float: left;
margin-left: 50%;
width: 50%;
height: 100%;
border: 1px solid red;
}
#header-right-box-content {
position: absolute;
bottom: 0;
left: 0;
}
#header-left-box p {
position:absolute;
bottom: 0;
font-size: 0.9em;
}
#receiver {
position: relative;
width: 98%;
border: solid 1px green;
}
</style>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="header">
<div id="header-left-box">
<p>Left header box</p>
</div>
<div id="header-right-box">
<div id="header-right-box-content">
<p>Right header box</p>
</div>
</div>
</div>
<div id="receiver">Receiver</div>
</body>
</html>
最佳答案
将接收器设置为绝对位置，顶部仅略高于 30%。它会根据您的需要工作。
#receiver {
position: absolute;
width: 98%;
top: 35%;
border: solid 1px green;
}
关于css - Div定位(不需要时覆盖)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18172393/