Adding a declaration position: relative; to an element makes it a positioned element. The most common use case for this value is for parent elements that contain other elements with position: absolute;.

In this example, the pink element is the child of the green element, and it's positioned 100px below the top edge of its parent. If we remove the declaration position: relative; from the rule for .green, its positioning sets to default — position: static;, and the pink element will move up to be 100px away from the page's top edge, not the green element's edge.