Explain Relative and Absolute Position?

Question

Can anyone explain Relative and Absolute Position in Simple words i have lot of confusion ??

Answer 1

Hello,

• When you set the position relative to an element, without adding any other positioning attributes (such as top, bottom, right, left) nothing will happen.
When you add an additional position, such as left: 20px the element will move 20px to the right from its normal position.
Here, you can see that this element is relative to itself.
When the element moves, no other element on the layout will be affected.

• However, in absolute positioning, this type of positioning allows you to place your element precisely where you want it.
The positioning is done relative to the first relatively (or absolutely) positioned parent element.
In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself).

• More details and info here: https://dzone.com/articles/css-position-relative-vs-position-absolute

Hope it helps! All the best! :D