DEV Community

Nokha Debbarma
Nokha Debbarma

Posted on

CSS Position: relative

Initially, when I was learning CSS as a complete beginner I faced a lot with CSS position property. However, after learning and playing around I have learned how CSS position property works.
This post of especially for beginners who new to CSS and are confused with CSS position property.

HTML element for Demo:

carbon (1)

CSS code:

carbon (2)

In the code, you can see that no CSS position property is set.
So, here is the layout of the above code:
Screenshot from 2021-02-16 13-39-12

Position: relative;

Aughh.... tell me what the heck Position: relative is?
when you set CSS position: relative to HTML element the position is actually relative to itself. Still confused okay.

Let's set the child element to property: relative;
However, you will not see any changes to the child element position because by default it wouldn't until you set any of these property i.e top, left, right, or bottom.
For example, let's just set the values for top and left.
top: 50px;
left: 50px;
carbon (3)
Screenshot from 2021-02-16 14-27-24

In the above image, you can see that position of the child block element has changed.
As we have set left:50px, what it really means is that the element will move 50px in the left to right direction with respect to(from its) original position.
And we have also set top:50px, element will shift 50px in the top to bottom direction with respect to(from its) original position.

carbon (4)

Screenshot from 2021-02-16 14-22-51
For the above image we have set
bottom:50px;
right:50px;

Okay now it's your turn to play around with bottom,right,top,left learn how element moves.
Position: relative; doesn't care about other elements it changes its position relative to its original position.
That's it!

Top comments (0)