Here is the easy explanation of position: absolute and position: relative.
With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from body element otherwise it will take it's position from the nearest defined position element.
Below is the example.
In this case, 'div2' takes the position from 'div1' element.
This is the first position element
This is a heading with an absolute position
In this case 'div2' takes position from body elements as no position is defined.
This is the first position element
This is a heading with an absolute position
With relative position, an html elements can move from it's normal
position.Below is the example.
In this case it will move from it's postion 10px left and 10px below.
This is a heading with an absolute position