CSS Position

The CSS property position allow us to override the default document flow behavior of an element. We can use position to create floating elements that float on top of all elements and stay in the same position even if we scroll further down on the same page. We can move certain elements slightly towards one direction in order to implement the web page exactly as we envisioned it in our designs. In other words, it gives us a lot of flexibility.

The five main positioning types are:

• Static: the default positioning behavior where elements are put into their normal position in the document layout flow
• Relative: identical to static positionining except that a relative element can be moved horizontally and vertically using the top, bottom, left and right properties (relative positioning combined with absolute or sticky positioned elements can be very powerful)
• Absolute: completely break an element out of the normal document layout flow and position it relative to the containing element which is the nearest positioned parent (useful for menus, popup boxes, etc)
• Fixed: identical to absolute positioning except that it does not look for the nearest positioned ancestors, but rather immediately positions relative to the visible part of the viewport (useful for elements that must have the same position regardless of scroll position)
• Sticky: positions an element relatively until we reach some specified threshold where it becomes fixed (useful for headings that follow their respective paragraphs)