如何在div中定位绝对？
我有一个奇怪的问题,将一组div放在另一个div中.我认为用图像描述它最好:
在黑色(#box)div内,有两个div(.a,.b)必须放在同一个地方.我想要实现的是第一张图片,第二张是我得到的效果.看起来如果div没有清除或什么东西浮动,显然不是这种情况.任何想法都会受到欢迎!
这是此示例的代码:
CSS:
#box {
background-color: #000;
position: relative;
padding: 10px;
width: 220px;
}
.a {
width: 210px;
position: absolute;
top: 10px;
left: 10px;
background-color: #fff;
padding: 5px;
}
.b {
width: 210px;
position: absolute;
top: 10px;
left: 10px;
background-color: red;
padding: 5px;
}
#after {
background-color: yellow;
padding: 10px;
width: 220px;
}
HTML:
<div id="box">
<div class="a">Lorem</div>
<div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>
Jim*_*bor 42
- 首先,所有块级元素都是静态的"文档".所有元素的默认定位是
position: static,这意味着元素未定位并出现在文档中通常的位置.通常,除非您需要覆盖先前设置的定位,否则不会指定此项. - 相对位置:如果指定
position: relative,则可以使用顶部或底部,左侧或右侧相对于文档中通常出现的位置移动元素. - 指定时
position: absolute,元素将从文档中删除,并准确放置在您指定的位置.
因此,关于您的问题,您应该将包含块定位为相对,即:
#parent {
position: relative;
}
你应该将子元素置于父元素中,如下所示:
#child {
position: absolute;
}
请参阅:通过十个步骤学习CSS定位
- @JimmyObonyoAbor 最好的 (2认同)
Emi*_*ily 30
绝对div从文档流中取出,因此包含div除了填充之外没有任何内容.给#box一个高度来填充它.
#box {
background-color: #000;
position: relative;
padding: 10px;
width: 220px;
height:30px;
}
本文描述了该问题(以及其他内容).
#box是相对定位的,这使它成为页面"流"的一部分.您的其他div绝对定位,因此它们将从页面的"流程"中删除.
页面流意味着元素的定位会影响流中的其他元素.
换句话说,正如#box现在看到的那样,dom,.a和.b不再是"内部" #box.
要解决这个问题,您可能希望将所有内容都设为相对,
一种方法是:
.a {
position:relative;
margin-top:10px;
margin-left:10px;
background-color:red;
width:210px;
padding: 5px;
}
其中之一#a或#b不需要position:absolute,所以它#box会增长以适应它.
所以,你可以停止#a被position:absolute,仍然定位#b在它的顶部,就像这样:
#box {
background-color: #000;
position: relative;
padding: 10px;
width: 220px;
}
.a {
width: 210px;
background-color: #fff;
padding: 5px;
}
.b {
width: 100px; /* So you can see the other one */
position: absolute;
top: 10px; left: 10px;
background-color: red;
padding: 5px;
}
#after {
background-color: yellow;
padding: 10px;
width: 220px;
} <div id="box">
<div class="a">Lorem</div>
<div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>(注意我的宽度不同,所以你可以看到一个在另一个后面.)
在Justine的评论之后编辑:然后你唯一的选择是指定#box的高度.这个:
#box {
/* ... */
height: 30px;
}
假设a和b的高度是固定的,那么效果很好.请注意,您需要通过在HTML顶部添加doctype来将IE置于标准模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
在此之前正常工作.
| 归档时间： |
|
| 查看次数： |
155547 次 |
| 最近记录： |