CSS Absolute Position

CSS absolute positioning removes the element from the natural flow of the document and layer it on top of other elements, we can then apply positions to move the element around.

By default an absolutely positioned element will position itself at its original location but out of the flow.

Absolutely positioned elements position themselves to the outer most "relative" element. By default the body is this most outer container.

Absolute position item inside relative position container

We can create and assign relative positioning to any element and absolutely position them inside. In the above example if we want the position values of top or bottom and left or right to reference the container we can do this by adding the position: relative; to the container.