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:
CSS code:
In the code, you can see that no CSS position property is set.
So, here is the layout of the above code:
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;
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.
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)