What's the difference between a relative, fixed, absolute and statically positioned element?

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

• static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.

What's the difference between a relative, fixed, absolute and statically positioned element? (Cont...)

• relative - The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).

What's the difference between a relative, fixed, absolute and statically positioned element? (Cont...)

• absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block.
  
  Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
  These elements do not affect the position of other elements.

What's the difference between a relative, fixed, absolute and statically positioned element? (Cont...)

• fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.

• sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.