What are the different positioning values and how do they work?

The position property decides whether an element stays in normal flow and what its offset properties are measured from. It has five values:

• static, the default, keeps the element in normal flow and ignores offsets.
• relative keeps its space in the flow and shifts the element visually.
• absolute takes the element out of the flow and places it against its nearest positioned ancestor, or the initial containing block.
• fixed takes the element out of the flow and places it against the viewport, so it stays put while the page scrolls.
• sticky acts like relative until scrolling reaches its offset, then sticks there, but only while its containing block is still on screen.

A sticky element sticks inside its nearest scrolling ancestor, so overflow: hidden on a parent can stop it working.

A fixed element is placed against an ancestor instead of the viewport when that ancestor has a transform, filter or perspective.