DEV Community

Cover image for Position-relative and absolute
KILLjoy
KILLjoy

Posted on • Updated on

Position-relative and absolute

1.Relative
When your are using position relative it relative to itself means relative will try to position itself according to it's current position.

Image description
So above image shows that suppose you have given a green box container position:relative top:20px this green box will moves it's current position.

2.Absolute
When you are using position absolute it will try to look first it's ancestor(parent) if we have defined the position relative over there(parent),so it position according to its ancestor.otherwise it will position according your browser or other dimensions.

Image description

Above images when u do green box position:absolute left:20px and in black container you have defined a position:relative so the green box will move its parent position or we can say its ancestor if parent doesn't defined position relative . then it will look browser dimensions.

ThankYou!😃
Keep learning new things.

Top comments (0)