Relative and absolute positioning

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-03-02

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.