absolute vs relative position width & height

Question

i know what is absolute & relative position but some points are still not cleared to me. for reference

css:

.rel{     position:relative;     background:red; }  .abs{     position:absolute;     background:blue; } 

html:

<div class="rel">rel</div> <div class="abs">abs</div> 

now points are :

• relative div takes 100% width automatically but absolute div only takes content width. why?

• when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?

• when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?

• when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?

Answer 1

1. Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.

2. An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.

3. This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.

4. The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.