我有一个头div,里面还有divs头左框和头右框,它们向左浮动并水平并排放置。

在这些之后,我想放置一个div接收器,该接收器将占用下面的可用空间。

问题是接收器div不在其他显示之下,而是在其他“覆盖”之上。我该怎么办?我希望接收器位于其他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;
}


选中此http://jsfiddle.net/8wRte/1/

10-05 20:44
查看更多