CSS positioning changes how elements flow on the page. The are five values: static (default), relative, absolute, fixed, and sticky.
Static positioning is the default value for all elements. Elements stact in normal document flow. Top, right, Bottom, Left properties do not apply; are ignored.
Relative positioning moves an element relative to its normal position. Top, right, bottom, left properties will move the element from where it would normally be.
I am relative. I move from my normal position.
Relative positioning moves an element from its normal position using top, right, bottom, left. It still takes up space where it would normally sit.
I am relative. I moved 20px from the top.
Absolute positioning removes an element from normal document flow. It positions relative to the nearest positioned ancestor (or the document if none exists).
I am absolutely positioned. I'm taken out of normal flow.
Fixed positioning anchors an element to the viewport. It stays in place even when you scroll. Removed from normal document flow.
I am fixed. I stay in place when you scroll.
Sticky positioning is a hybrid. Element flows normally until you scroll past it, then it sticks to the viewport edge you defined.
I am sticky. I flow normally, then stick when you scroll.