CSS (Cascading Style Sheets) offers several ways to position elements on the web page, among which the most commonly used ways are the relative and absolute positioning.
Relative Positioning:
In CSS, an element with position: relative is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Absolute Positioning:
An element with position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with the page scrolling.
The main difference between the two is that an element with position: absolute is taken out of the flow of the webpage and can overlap with other elements, while an element with position: relative moves other elements away to make space for it.
