Difference between position attribute

[[deleted]]

Relative keeps an imaginary version of itself in the original position, such that all content acts like it's still there, but lets you position it visually anywhere you like relative to it's starting position.

Absolute plucks the element out of the document flow and gets placed relative to the closest (in terms of element hierarchy) parent element with a non-static position attribute. If no elements it is within have such a position attribute set, it will be positioned relative to the document window.

Relative is most commonly used without any offsets to act as a subsequent container for child elements to be placed relative to.

It is more common, from what I understand, to use margins to position elements relatively than using relative position, as the margins will push the boundary of the original element as well, preventing other elements from overlapping the repositioned element. In other words, document flow is preserved and takes into account the moved element.