CSS Position

CSS Position helps to move a container to left right top and bottom we use different CSS properties to move the container.

1. position: static;
2. position: relative;
3. position: absolute;
4. position: fixed;
5. position: sticky;

position : static;

Position static is the default property of Position. Actually, in position static left right top bottom property won't work. Position flow means normal flow nothing else. It won't change position of the box

position : relative;

If we give position relative to any container than the container move from his position it won't affect the other container's position. We can give top right bottom left properties to position relative.

Note - The container moves from his own position only.

position: fixed;

Position fixed means whenever we scroll the page it will fix in position it won't move from its place no matter what. We can give left right top bottom position to it. And at that position it will fix there.

position: sticky;

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 view port - then it "sticks" in place (like position:fixed).

position: absolute;

Position absolute is always relative to its parent if we directly apply position absolute to any child than it take parenting as body it's relative to parent

If we are giving position absolute to any child we have to give position relative to its parent. So the child container will move according to the parent container.