html - 当位置从绝对变为相对时设计崩溃

Question

我的情况是，我必须将一个 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 的位置从绝对位置更改为相对位置，
结果 design 崩溃了，也就是说，DivFirst 的高度 发生了变化，
内部 div [DivSecond] 未正确居中。

我可以为 inner div 使用 position absolute，但我只需要知道这是为什么
发生。？顺便说一句，如果我做错了什么，请指导我走正确的道路。

---

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

DEMO

Answer 1

在这种情况下，负的上边距会拉动#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;
}