Let's learn about CSS <position/>...

In the CSS there are many property are there for different role in position property for the elements use five different values (Relative, Static, Fixed, Absolute or sticky) with that top, left, right and bottom property are also used with the position property;

Let's talk about these five values:-

1.Static:- Position:Static; Not do anything in the elements set the normal flow of the element;

2.Relative:- Position:Relative; assign the properyt of left, right top and bottom with value that the elements effect it moves on there position but the gap are there of a element;

example:- div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }

output:

In that the div move to the right because of the left property the gap are there in that gap no other elements come its reserved for the div;

3.Absolute:- Position:Absolute; Absolute is to make the div from normal flow of the div and the div overflow to the page... and this is the oppostie of the relative....

example:- div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #12B0E8; border-radius:10px; background-color:#8D3DAF;

}

div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #12B0E8; border-radius:10px; background-color:#8D3DAF;

}

output:

Second div move from there on normal flow and its not contain any gap b/w the div second element place there;

4.Fixed:- Position:fixed Make the element fixed that the element cant move from the page the page scroll but element not that the power of fixed value;

5.Sticky:- Position:Sticky is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

So we complete position now this looking confusing all the position values I recoommend you please write code own your self and try the all the property of postion left,right,top and bottom.....i am sure you became master in that...

THANK YOU