Position relative and absolute differences in CSS

Relative Positioninga Relative Positioned element is the positioned Relative to its normal position. The reserved space for the element was still preserved in the normal flow. The relative position is the position of the parent element of the relative element. Left, top is adjusted relative to its parent element, but the position is consistent with the look in the DOM (in normal flow). Absolute positioning

An absolute position element was positioned relative to the first parent element which has a position other than static

Absolutely positioned elements is removed from the normal flow.

The absolute position is relative to the first position of the parent element with the position (fixed, relative, absolute) attribute, and the actual position may be inconsistent with the DOM (be removed from the normal flow).

Position relative and absolute differences in CSS