Simple Layout designing using CSS3(Positioning)

Lets see how we have design the layout using css3.In Normal we fix width and height, background,margin,etc to design a simple layout. lets consider that as container ie outer layer.

<div class="container">
<div class="main1">
</div>
</div>

By fixing width,height,background,margin,and padding we will have the output as shown below:

.container
{
    width:1024px;
    height:720px;
    margin:0 auto;
    background:#BBF1B8;
    padding:0;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    
    
}

Output:

Now we have to design a div in the bottom right of the above layout.For that we can use margin-left and margin-top but it is not the correct procedure for designing using Position. so we have use CSS3 z-index a negative and positive value,right as 0,left as 0,etc.lets see the code for that.

Correct procedure for designing using CSS3 : 

.main1
{
    width:600px;
    height:200px;
    background:#666666;
    position:absolute;
    right:0px;
    bottom:0px;
    z-index:5;
    
    
}

Now the output is