0

看我的情况是，我必须将div[DivFirst] 放在另一个div[DivSecond] 中。
我通过设置下面css给出的来做到这一点，

#DivFirst
{
    width:500px;
    height:500px;
    position:relative;
}
#DivSecond
{
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px; 
}

之后，出于某种原因，我更改了DivSecond's position from absolute to relative，
结果design崩溃了，也就是说，DivFirst's height更改了并且
内部 div [ DivSecond] 不centered正确。

我可以选择position absolutefor the inner div，但我只需要知道为什么会这样
。？顺便说一句，如果我做错了什么，请引导我走上正确的道路。

[注意： 通过设置内部 div 的绝对位置和相对位置来运行演示]

演示

4

2 回答 2

0

在这种情况下，负上边距正在拉动#DivFirst。您可以通过将 overflow: auto 添加到 #DivFirst 来停止此行为。

由于您知道所涉及的 div 的大小，您可能需要考虑仅手动定位它们，而不是尝试用负边距将它们轻推到位http://jsfiddle.net/DDcfD/：

CSS：

#DivFirst
{
    width:500px;
    height:500px;
    position:relative;
    background-color:red;
}

#DivSecond
{
    position:relative;
    background-color:yellow;
    width:200px;
    height:200px;
    top:150px;
    left: 150px;
}
于 2013-03-03T10:50:47.703 回答
0

会发生这种情况，因为当您给时#DivSecond position: absolute;，您将目标元素相对于其第一个定位的祖先元素定位，只要它不是静态定位的。

当你给你的#DivSecond position属性一个relative值时，你不再将它相对于它的祖先元素定位，而是相对于它的正常位置，默认情况下，这意味着你将 50% 添加left到这是正常的位置。

您可以在此处查看示例。

于 2013-03-03T10:25:35.710 回答