Notes from Learn CSS Position in 9 Minutes, by Kyle
Positioning Example
Static is the default HTML position property given to all elements when they enter onto the page.
When applied to an element the static property tells the element to follow the other elements in the document flow.
The static position property is what you are most used to.
Relative positioning is almost exactly like static positioning.
Relative positioning allows you to change the position of the element relative to where it would normally be in the document flow if it was statically positioned.
In general you are almost never going to be using the top, left, right, and bottom on a position relative, because all that does is remove your element out of the document flow and it becomes really difficult to style things around it.
Absolute positioning deffinately gets used for top, left, right, and bottom.
Absolute positioning completely removes the element from the document flow, and everything else renders as if that absolute element didn't event exist at all.
This makes position: absolute; useful if you want to stick something in a position but you don't want anything else to move around it.
position: absolute; positions an element inside some parent container that it can refference.
If an element (let's call it George) is set to "position: static;" then George can not have any other element positioned absolutely or relatively to it!!!
If you would like to position another element absolutely or relatively to George, then George must be set to "relative, absolute, sticky, or fixed", but certainly not "static" the default.
Fixed positioning is very similar to absolute positioning, but there are some caveats.
Fixed position elements stay in the same position when you scroll!
position: fixed; positions itself based on the entire HTML page and not based on the parent element that has position: relative, absolute, etc;
Sticky positioning is a combination of both relative and fixed positioning into one.
The element begins life with a relative position. However, when you scroll down the page eventually the element will touch the top of the window and become "fixed" to the html page.