CSS: Div position:relative alignment problem

Answer 1

use absolute positioning, which will make the inner div's position absolute to the parent div (aka containing block).

And I would recommend not using inline styles and use a stylesheet:

<style type="text/css">
    #top 
    {
        position:relative;
        border: 1px solid red;
        width:400px;
        height:150px;
        margin:0px auto;
    }

    #child1, #child2
    {
        position: absolute;
        border: 1px solid red;
        width: 262px;
        height: 20px;
        left: 20px;
    }

    #child1 
    { top: 20px; }
    #child2
    { top: 60px; }
</style>    

 <div id="top">
    <div id="child1">div-1</div>
    <div id="child2">div-2</div>
</div>

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Answer 2

You can either use absolute positioning - position:absolute or display:none (css).

Answer 3

If you set the positioning of the outer element to relative, then absolute positioned elements inside of it will be positioned relative to the enclosing one:

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto; position:relative" >
    <div style="border: 1px solid red; position: absolute;
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div>
    <div style="border: 1px solid red; position: absolute;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

Now you can remove div1 and div2 won't move.

Answer 4

You can set the visibility CSS property on DIV1 to hidden, and even while being invisible it will take up it's original amount of space on the page.

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >
    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 20px; left: 20px;
    visibility:hidden;">div-1</div>
    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>