Last Updated: 2024-04-18

Absolute - despite the name suggesting so - does not mean positioning relative to the whole viewport. Its just to the nearest ancestor "positioned" element.

Relative - relative to where it would otherwise be in flow

An example:

If you give top: 20px to a relative positioned entity, it will be shifted 20px down from its regular flow position. Any positioning parent elements are not a consideration. By contrast, if you give top: 20px to an absolutely positioned element, it will be 20 down from the parent's top.