Design collapsed when position changes from absolute to relative - html

Question

See my case is, i have to center a div [DivFirst] inside another div [DivSecond].
and i had done it by setting the following css given below,
#DivFirst
{
width:500px;
height:500px;
position:relative;
}
#DivSecond
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
after that, for a reason i had changed the DivSecond's position from absolute to relative,
as a result the design got collapsed, that is, the DivFirst's height got changed and the
inner div [DivSecond] was not centered properly.
I can go with the position absolute for the inner div, but i just need to know why this is
happening.? by the way if i am doing anything wrongly, kindly direct me in the right path.
[Note: Run the demo by setting both absolute and relative position for the inner div]
DEMO

Answer 1

In this case the negative top margin is pulling #DivFirst with it. You can stop this behavior by adding overflow: auto to #DivFirst.
Since you know the size of the divs involved you may want to consider just manually positioning them without trying to nudge them into place with negative margins 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;
}

Answer 2

That happens, because when you give #DivSecond position: absolute;, you position your target element relatively to its first positioned ancestor element, as long as it is not static positioned.
When you give your #DivSecond position property a relative value, you no longer position it relatively to it's ancestor element, but relatively to it's normal position, where it would be by default, which in your case means, you add 50% to the left and 'top' of it's normal position.
You can see examples here.