2016/01/18: CSS: It's All Relative:What are the differences between relative, absolute, fixed, and static positioning?

I initially had a hard time discerning what the differences were for the various positioning types. It made sense to me when I finally came across a good set of instructions that defined them in order, as one concept builds up to the next. I will go over a summary here.

Static

Let's start with static positioning. This is the default flow of objects, even if you don't explicitly state "static". Block elements will stack on top of each other, and inline-block elements will rest next to each other. It's the normal flow.

Relative

To think of how relative works, first pretend the element was positioned statically--that is, it appears where it normally would. From the location where the object would normally sit, it is then "moved" or "adjusted" out of that spot. Interestingly, all the objects in the normal static flow treat the empty space left behind AS IF the object WERE STILL THERE! (Sounds almost like a quantum physics concept.)

Absolute

Absolute is ALMOST like relative, but this time the empty space left behind is closed up by the other objects, which now act as if the original object never existed. The object that has been moved now resides in it's new spot with respect to its container.

Fixed

Fixed is just like absolute, EXCEPT that it's new spot is NOT with respect to its container--instead it's with respect to the browser window (viewport). Whereever it's positioned, there it will remain ALWAYS in that window, regardless if the window is scrolled up or own--the object remains fixed.

So there you have it. Hope this summary helped. Until next time.

--- JLH