What's the difference between a `relative`, `fixed`, `absolute` and `static`-ally 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.
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).
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.
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.

References