What is a difference between absolute and relative position?

In CSS, position property is used to specify the position of an element. There are two main position values: absolute and relative.

Relative positioning is used to set the position of an element relative to its normal position. When an element is positioned relative, it is still part of the normal flow of the page and will occupy the same space as it would if it were not positioned. However, with the “top”, “bottom”, “left”, and “right” properties, you can shift the element from its normal position.

Absolute positioning is used to set the position of an element relative to the nearest positioned ancestor, instead of the viewport like “fixed” position. If there is no positioned ancestor, it will default to the document body, and move along with page scrolling. An absolutely positioned element will be taken out of the normal flow of the page and will not affect the position of other elements.

Here’s a summary of the differences:

• Relative positioning: Keeps the element in the normal flow of the page, does not affect other elements, and can be shifted from its normal position with the “top”, “bottom”, “left”, and “right” properties.
• Absolute positioning: Takes the element out of the normal flow of the page, does not affect other elements, and is positioned relative to the nearest positioned ancestor or the document body if there is no positioned ancestor.