CSS Position

By default, elements are laid out one after another in document order. position changes that. relative shifts the element from its own original position, and the original space is kept. absolute places it relative to the nearest positioned ancestor, and it no longer takes up its original space. fixed pins it to the browser window, so it doesn't move when you scroll. sticky makes it stick in place once it scrolls to a certain point, which is how sticky headers work.

The most common combo is "absolute child, relative parent." Give the parent position: relative and the child position: absolute plus top: 8px; right: 8px, and you can put a badge or close button in the top-right corner of a card. Forget the relative on the parent, and the child ends up somewhere else.

Positioning decides where an element goes. When elements overlap, which one covers which is decided by z-index. If Flex or Grid can handle the layout, don't force it with absolute positioning.