Comparison
Absolute positioningvsContaining block
Absolute positioning
you took the element out of the flow and everything after it moved up to fill the gap.
Removing an element from normal flow and placing it against its containing block, so it no longer affects the size or position of anything else. It is the right tool for overlays and decorations that must not disturb the layout, and the wrong one for anything whose size depends on content, because the parent can no longer grow to fit it. The `position: relative` on the parent, which does nothing visible on its own, exists purely to become that containing block.
Full entry →Containing block
your absolutely positioned element anchored to the whole page instead of the card you meant.
The rectangle an element's percentages and offsets are resolved against. For a static element it is the nearest block ancestor's content box; for `position: absolute` it is the nearest positioned ancestor; for `position: fixed` it is normally the viewport — unless an ancestor has a `transform`, `filter` or `will-change`, which makes it the containing block instead. That last exception is why a fixed header stops being fixed inside an animated panel.
Full entry →