The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

Positioning Question while waiting on answer

I'm still having problem understanding the relative and absolute positioning attributes. I have a book "Learn CSS in 24 Hours". Well it's been a lot longer than 24 hours and I'm still wrestling with the concept.
In the book it keeps referring to a "context box":
"The context box is determined by the value of the position property. If the value of the position is relative, the context box is the original position of the element. If the value of the position is absolute, the context box is the display box of the <body> tag."

What is the context box? The div I'm working on? The browser window? What and where am I measuring from to know what amount to enter?

Any insight would be great. This seems to be the most confusing part of CSS. When I read the above, I feel like it's a box within a box within a box within a box. Maybe it is maybe not. I don't know, my head is spinning trying to figure this out.

The context box is basically the parent of the element and a parent of a positioned element is defined in a special way as shown below.

There is a short explanation in the FAQ thread of which i've duplicated below:

Originally Posted by faq

FAQ:Absolute Positioning :

An absolutely positioned element is removed from the normal flow of the document and placed precisely at the co-ordinates specified by top,left, right or bottom.

But what is the element absolutely positioned from? It is positioned absolutely from the top left hand corner of its containing block (i.e. its parent). The containing block of the positioned element is the nearest ancestor element which has a value for the property position other than static. If there is no ancestor then the containing block is the root element , which is the html element outside of all margins set on the body.

So what this boils down to is that an element will be absolutely positioned from the top left of the viewport unless it is nested in another element that has a value for the property position other than static. e.g. position:relative or position:absolute. In these cases the element will position itself the specified amount from the top left of its parent elements.

So the usual way to place an element in relation to its parent is to give the parent a position:relative without co-ordinates which keeps the parent in the flow of the document. The nested child element will then takes its absolute positioning co-ordinates using the parents top left co-ordinates as its starting point.

Relative positioning is easier to understand as it relates only to itself and no other elements. It does not matter what parent it has or where it is and the positioning context is in fact itself. (as stated in your post).

A relatively placed element is moved from where it is and then put somewhere else. So left 10px would mean move me from where i am by 10 px to the left.

However the space that the relative object previously occupied is preserved and all other elements will react as if the elelement was still in its original position in the flow of the document.