Problems in understanding why in the following example, absolute was used. if i use relative, why does the top block give margin, even when i have put body margin=0px

Hi @f20212732 ,
With position: relative; , an element is positioned relative to its normal position in the document flow and Other elements on the page will still consider the space occupied by the relatively positioned element even if it is moved.

Whereas With position: absolute; , an element is positioned relative to its nearest positioned ancestor or to the document itself if no positioned ancestor is found The element is taken out of the normal document flow and may overlap other elements.

The relative positions an element relative to its normal position, while absolute positions an element relative to its nearest positioned ancestor or the document itself. Additionally, absolute removes the element from the normal document flow and may cause overlapping of other elements.