Static pos­i­tion­ing (the default value) is actu­ally a lack of pos­i­tion­ing.
Absolute or fixed pos­i­tion­ing removes the ele­ment from the flow of the doc­u­ment.
Absolutely posi­tioned ele­ments are posi­tioned rel­at­ive to nearest posi­tioned ancest­or ele­ment.
When you want to move an ele­ment (while keep­ing it in the flow of the doc­u­ment, but without dis­turb­ing any oth­er ele­ments).
When you want to define a con­tain­ing box for abso­lutely posi­tioned des­cend­ant ele­ments.
When you need an ele­ment to have pos­i­tion­ing so that you can use z-index.
Elements are nat­ur­ally rendered in the flow of the doc­u­ment, and as such, they inter­act (i.e. they affect the pos­i­tion of each oth­er). This is gen­er­ally a good thing, as most of the ele­ments on your page have a rela­tion­ship with the ele­ments around them. For instance, a foot­er being pushed down by your main con­tent.
Sometimes though, you want to move an ele­ment without it affect­ing any of the ele­ments around it. This is where position: relative; comes in handy. When using rel­at­ive pos­i­tion­ing with the top, right, bottom, or left prop­er­ties, it is only the gen­er­ated box that is actu­ally shif­ted; the ele­ment still remains where it was in the flow of the doc­u­ment. Keep in mind that this can often res­ult in over­lap­ping ele­ments.
Also, it is import­ant to remem­ber that the top, right, bottom, and left prop­er­ties can­’t change the size of a rel­at­ively posi­tioned ele­ment (they can if the ele­ment is abso­lutely posi­tioned).
When pos­i­tion­ing an ele­ment absolutely—as it is removed from the flow of the document—the top, right, bottom, and left prop­er­ties don’t act as they would on a rel­at­ively posi­tioned ele­ment. These prop­er­ties are now based on the nearest posi­tioned ancest­or (or the root ele­ment, if there are none). This means that if you are giv­ing an ele­ment a pos­i­tion of abso­lute and you want to con­fine it to a cer­tain ancest­or, set­ting position: relative; on that ancest­or will do the trick without affect­ing the flow of that ele­ment.
The ter­min­o­logy is a little tricky here as an ele­ment with position: static; appears as though it has a pos­i­tion set, but as stat­ic pos­i­tion­ing is in fact no pos­i­tion­ing at all, stat­ic ele­ments can­’t be con­tain­ing boxes for abso­lute ele­ments.
Lastly, z-index is only respec­ted on ele­ments that have a pos­i­tion set. So if you don’t want to remove an ele­ment from the flow of the doc­u­ment, but want to use z-index, rel­at­ive pos­i­tion­ing is your friend.
Nice writeup, the whole pos­i­tion­ing concept con­fused me for so long when I star­ted with CSS. It still bugs me that cer­tain things aren’t broken up more. For example, if you want to adjust an ele­ment’s pos­i­tion (top, bot­tom, left, right) and have z‑index apply, then you use pos­i­tion: rel­at­ive, but then that ele­ment is forced to be the con­tain­ing ele­ment, which might not be what you want. I’ve run into that situ­ation a lot. I just wish the con­trol was more gran­u­lar.
Some inter­est­ing thoughts there, Jack. Thanks for the com­ment!
