The position is a property of CSS which helps to manipulate the location of an element.This can be based on various conditions.Following are the positions mainly used in css.

Static

Every element has a static position by default, so the element will stick to the normal page flow.So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.

Example: In this example if we want 2nd item to go 20px down from the top, we cannot do that as the position is static.

Relative

We can change the position of an element based upon its previous position using relative.

#item{
position:fixed;
}

Example: Same example which we tried with static,if we want 2nd item to go 20px down from the top, we can do that now using position as relative. It will move little down from where it originally was before the change.

Absolute

We can change the position of an element based upon its immediate parent using relative

#item{
position:absolute;
}

Example: if we want 2nd item to go 50px down from the top and 20px left from the patent element i.e container, we can do that now using position as absolute.

Fixed

If we want an element to get fixed to a certain part of the page and donot have any effect on it while scrolling the page, then we use the position as fixed.Fixed positioned elements are always relative to the document, not any particular parent .Chatbox/Chat-bot is a good example of fixed element.

#item{
position:fixed;
}

Example:

if we want 2nd item to appear at bottom right always even if we scroll through the page , we can do that now using position as fixed.

Sticky

If we want an element to go with the page flow but get stick at certain position then we can use the position as Sticky. A Navbar which can be seen throught scrolling the page is good example of it.

#item{
position:sticky;
}