What's the difference between a `relative`, `fixed`, `absolute`, `sticky` 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 flows 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 where the element 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 — or, if none exists, 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 it 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.