Which positioning comes first?

i m confused about positioning elements. now i know how absolute and relative positioning work. but what confuses me, which to use first as a parent. would it be absolute or relative first? i know absolute is position which is absolute to its parent element. if no other position element exisit. its positioned to root element which is body tag. right? and relative element is relative to its absolute element. correct me if i am wrong on those two definition,
what confuses me is which element to use first. should it be relative or absolute? moreover i have confusion between margin-top and just property of top. i have attached a mockup of thing i trying to create, i gave the background strip in maroon. which thing should be absolute. for now i made the strip absolute and kept the icons as ul and li which in wrapped in div which has relative positioning. but my basic question remain the same which position to use first

Philip, as a side note to this conversation, I was reading through the css site trying to shed some light on the subject and came across your recommendation of the article. It is probably the best explanation of block vs inline that I have read and clarified a number of things for me. Looking back, without a clear understanding of the inline and block behavior and which elements are which, you don’t stand a chance of succeeding with css. I was having a real problem with that but now it all seems perfectly clear. I am sure there will be other hurdles but thanks for the recommendation.

Philip, thanks for the article. i already know much of it but Paul got my question right, though i must play with positioning to know them better. but like paul said relative should be parent. to absolute

Very informative thread!

Can get very confusing. I found this an invaluable article.


Normally you would apply position:relative to the parent so that you can absolutely place the children in respect of that parent.

Of course you must ensure that you maintain the flow of the document so usually an absolute element would be placed inside a parent that has taken care of the flow by its content or by its height in some way. e.g. in a header you could absolutely position some small elements in place to make the display that you want but as long as the header has other static content or height in some form then the flow of the document is protected.

Forget about actually moving things with relative positioning for the time being as it should not be used for structural layout at all and is used for more subtle overlapping effects. Most beginners abuse relative positioning and use it entirely in the wrong way so much to say that I tell them don’t use it until you realise what it does. 99% of the time they don’t need it.

A relative element is removed in respect of itself and not anything else.

That is to say the element is moved from where it is in the flow of the document by the number of pixels you tell it to move. If you say top:100px for a relative element then the top edge of that element will be moved 100px down the page from where it was.

HOWEVER the space that the element previously occupied is preserved and you can imagine that although the element appears to be somewhere else it has in fact not moved at all and everything on the page will react as if the element was still in its original position. It is moved viusally but not physically. This is why you should not use it because it just leaves holes in the page that can’t be filled and the layout will overlap (unless that was your goal).

Most times you don’t need absolute positioning either and you can use floats instead for horizontal alignment and still protect the flow of the document.:slight_smile:

Margins on static elements on the other hand push element away from each other and maintain a relationship no matter what the size of the element (excluding for now the issues of margin collapse and margins between floats and block formatting contexts).