Paul_o_b - 10:19 am on Sep 26, 2012 (gmt 0)
When you absolutely position something you take it out of the normal flow of the page and everything else on the page (outside of the absolute element)will not know that the absolute element exists and will take no care in avoiding or interacting with it. It's like creating little islands of their own.
An absolute element is positioned with respect to its nearest ancestor that has a positioned defined other than static. If no such ancestor exists then the absolute element is placed in relation to the top left of the viewport.
Therefore if you say:
The element will now be placed 100px from the top left of its positioned parent. If as mentioned no such positioned ancestor exists then the element is placed 100px from the top left of the viewport and will just sit solidly in place (along with its children) and ignore anything else going around it (except to scroll with the viewport of course).
If you wanted an absolute element to stay track with say a centred layout then you would ensure that the centred layout has position:relative applied (without co-ordinates) and the the absolute child will stay track with the top left position of that centred layout but of course may still sit on any static content in that area.
Use absolute positioning with care and do not use it for structural layout but rather use it in small doses where you may want to push an element to the right or left corner and sit on top of some other element. Use it in a context where the flow of the document is not compromised. For example you can't place an absolute into a page and then let content naturally flow beneath it. It's just not possible without absolutely positioning the other elements below and then you are tied into a rigid structure where everything becomes absolutely positioned and will be impossible to manage.
Content in your page should mostly be static positioned and then use floats for horizontal alignment and absolute positioning in small doses where needed.
As mentioned above you can go years without needing to use relative positioning (with co-ordinates) as it is a very subtle property that is widely misunderstood even by those that think they know css well.
When you move an element with relative positioning it is offset from where it is in the flow of the document and then moved by the amount that you specify in the co-ordinates for top,bottom,left or right.
If you say:
The element will be moved from where it would have been in the normal flow and then shifted left by 100 pixels and then down by 100 pixels. However, the important part to note here is that the flow of the page will not change at all.
Everything else on the page will believe that the element still occupies its original place and will react to the element as though it were in the position that it was before it was moved. It's akin to tearing a picture out of a newspaper and sticking it further down the page. Nothing else on the paper changes except that you have moved the picture somewhere else and most likely on top of something else.
You can say that an element moved with relative position is moved only visually but not physically. The space that the element previously occupied is always preserved.
You may think what use is that?
It is very useful in shifting elements a few pixels without disrupting the flow. If for example everything the page is nicely lined up but one element needs to be moved by 20px yet when you apply margins to that element everything else also moves then you could use relative positioning to move that element without affecting the positions of other elements.
So relative positioning with co-ordinates is not really good for structural layout unless you are doing advanced swapping column techniques but even then it is best avoided for something simpler and more natural.
Note that I have mentioned relative positioning when using co-ordinates but you will often see elements have position:relative added but no-co-ordinates used. This is fine and the reasons for this can be twofold. First as already mentioned a relative positioned element can be the container for an absolutely positioned child. Just adding position:relative does nothing else to the container and it will not be moved or change from its position unless you add co-ordinates.
The second reason for adding position:relative is when you want to add a z-index as only positioned elements can have z-index applied.
You will need a z-index where elements overlap and you want to control which is on top of the other. A lower z-index element (in the same context) will sit under and be obscured by an element with a higher z-index although children cannot be placed under their parent's background. (Contexts are atomic and the parent that has a z-index defined other than auto will control the level of all its children with respect to elements outside that context.
That means a child with a z-index of 1000 will not overlap an element outside that context that has a z-index of one unless the parent has a higher z-index. Ultimately its the z-indexed positioned parent that controls the stacking of its children with respect to elements outside that context. Also note that IE7 and under don't understand z-index:auto and will treat any positioned element as having a z-index of 0 and thus confining all children within that context.)
position:static is the default and there's no need to specify it unless you are over-riding a previous value.
Static simply means that the element will remain in the flow of the document and for example each bit of text you type will follow on from where you left off. Most sites should be made of static elements so that one section naturally follows the next and should you later change something at the top of the page you don't need to change all the rest of the page as it will just take up the flow as required.
The best way to understand positioning is to go and practice and test out and see what happens. An hour or so later you will begin to understand the subtleties. It's not that difficult once you understand the rules and life suddenly becomes easier :)