Difference between position and margin

Question

Why do we use position values like the top, bottom, right, and left?
Although we can use margin-top and margin-bottom margin-right and margin-left?

how can I understand this that when we use margin and when we use position?

Answer 1

In normal we use margin to move the elements from its current position and one thing it will cover the space from original to its end . But when we declare the position of object it will not take up extra space .

For example

 if you give something position: relative and pull it up 10 pixels, it will move, but continue to occupy (in terms of its box) the 10 pixels below it that it previously occupied. If you give something margin and pull it up 10 pixels, it moves up and brings everything underneath it with it, too.