CSS Position Explained: Absolute vs Relative

CSS position decides how an element is placed. relative nudges an element from its normal spot but keeps its space in the layout; absolute takes it out of the layout and places it relative to the nearest positioned ancestor; fixed pins it to the viewport; and sticky acts normal until you scroll past a threshold, then sticks. The trick most beginners miss is that absolute needs a parent with position: relative. In this post I explain all five values with examples, and every behaviour I describe was checked by measuring elements in headless Chrome. Positioning confused me for a long time.