What's the difference between a `relative`, `fixed`, `absolute` and `static`-ally positioned element?

High
CSS

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