i am confused between these 2 terms please help me understand what actully are they?
3 Likes
Hello @ksaini613,
Absolute and relative positioning in CSS can be differentiated as:
position: relative places an element relative to its current position without changing the layout around it, whereas
position: absolute places an element relative to its parent’s position and changing the layout around it.
When we want to move the GreenBox but do not want to affect the layout around it,this is where position relative comes in. Move the green box relative to its current position to 20px from the left and top without changing the layout around it. Thus, leaving a gap for the green box where it would have been had it not been position.
By applying position: absolute to the GreenBox, it will not leave any gap where it would have been. The position of the GreenBox is based on its parent position (the dotted border). Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.
I hope this clears your confusion if you have any further doubts you can post here.
1 Like