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?

here is a good reference for explaining the differences in the types of positions: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ — Dan, Mar 16 '11 at 10:10

score 58 · Accepted Answer · edited May 14 '14 at 20:50

58

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.
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.
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.
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.

edited May 14 '14 at 20:50

JYelton

answered Mar 16 '11 at 11:33

warmanp

thanks for your answers.I like the 1st & 4th point it's very useful but for the 3rd point please implement the value in the above code for better understanding – sandeep Mar 16 '11 at 11:49
@sandeep, your code above doesn't include any information on the parent element of the these two divs. I need to know how the parent is styled in order to answer your question fully. – warmanp Mar 17 '11 at 11:14
But, isn't `position:absolute` still relative to it's parent element? [w3schools.com](http://www.w3schools.com/cssref/pr_class_position.asp) says "The element is positioned relative to its first positioned (not static) ancestor element". What does that actually mean? What is an ancestor element and does it have to be absolute positioned? How do you find an elements ancestor element? – Agent Zebra Jul 02 '15 at 05:34
From point #2 I understand that it is necessary for a parent element with `position: relative` to have a certain height e.g. `95vh` or else the child element with `position: relative` does not have any effect. Is my understanding correct? – Keyur paralkar Apr 08 '21 at 15:12
@AgentZebra An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. – A A Nov 08 '22 at 09:07

1 Answers1