What is the difference between position relative, absolute, fixed, sticky and static?

position controls what an element is positioned against and whether it stays in the normal document flow.

• static — the default. In normal flow; top, left, right and bottom are ignored entirely.
• relative — stays in the flow and still occupies its original space, but is visually shifted by the offsets. Its main use is to create a positioning context for absolutely positioned children.
• absolute — removed from the flow, so it no longer takes up space. Positioned against the nearest ancestor that is not static; if there is none, against the initial containing block.
• fixed — removed from the flow and positioned against the viewport, so it does not move when the page scrolls. Used for headers, modals, and cookie banners.
• sticky — a hybrid. It behaves as relative until it reaches a specified offset while scrolling, then behaves as fixed within its parent's bounds.

Note: Two gotchas worth knowing. Sticky silently does nothing unless you give it a threshold such as top: 0, and it is constrained by its parent — an ancestor with overflow hidden or auto breaks it. And any ancestor with a transform, filter, or will-change becomes the containing block for fixed children, which is a genuinely confusing bug to meet in the wild.