gpt4 book ai didi

css - Div定位(不需要时覆盖)

转载 作者:太空宇宙 更新时间:2023-11-04 04:26:30 26 4
gpt4 key购买 nike

我有一个header div,里面还有header-left-boxheader-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;
}

检查这个http://jsfiddle.net/8wRte/1/

关于css - Div定位(不需要时覆盖),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18172393/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com