Question

我有一个标题 div，里面还有div header-left-box 和 header-right-box 向左浮动并且水平并排放置。

之后我想放置一个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>

Answer 1

使接收器处于绝对位置，顶部仅略高于30％。它会按你的需要工作。

#receiver {
    position: absolute;
    width: 98%;
    top: 35%;
    border: solid 1px green;
}

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

Answer 2

接收方正在覆盖，因为您的#header-left-box和#header-right-box为position:absolute且接收方为position:relative。您的解决方案是将标题左右框定位到relative或将接收者定位到absolute并添加top:(place height of header left and right boxes here)。

这是一个小提琴（http://jsfiddle.net/hRcYF/），其中一切都是positioned:relative。接收者需要float:left (or right)，并且#header-right-box需要浮动才能使其正常工作。

Answer 3

我认为你可以更轻松地做到这一点，为什么不做#header-left-box{float:left}和#header-right-box{float:right} 由于绝对位置的使用，#receiver div被放置在上方。使用这样的位置不是一个好习惯，所以尝试从你不需要的所有css元素中删除位置。请看这个例子：http://jsfiddle.net/E7T9F/。不要忘记你可以通过不同的技术（如填充和边距）来定位元素而不使用css :: position。

Answer 4

到处都不需要绝对定位。撤回它们并确保您没有将#header-right-box悬浮在左侧。还要确保清除#receiver。像这样 -

<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;
    clear: both; /*Cleared previously floated elements*/
    width: 98%;
    border: solid 1px green;
}
</style>

Div定位（不需要时叠加）

4 个答案: