Question

I always see code like this:

#container {
    background:#000000 none repeat scroll 0 0;
    display:block;
    overflow:hidden;
    position:relative;
    width:100%;
}

I thought position relative is used to accommodate the div relatively to its parent element using the CSS proprieties left right top and bottom (px). What’s the point of using it alone like the example below? Which other properties are being affected by position relative?

Answer 1

Child elements position can get affected by this.

After setting parent elements position to relative, when we try to set the child elements position to be absolute then it will be absolutely placed relative to the parent only and not to the document.

First example

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        position:relative;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

Second Example

<style>
    #container 
    {
        background:red none repeat scroll 0 0;
        display:block;
        top: 100px; 
        left: 100px;
        width:100%;
    }
    #child
    {
        position: absolute; 
        top: 0px;
        left: 0px;
    }

</style>
<div id="container">
    <div id="child">
        I am absolutely placed relative to the container and not to the document
    </div>
</div>

Try to check the above two examples and you will see the difference.