Position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

There are five types of position values are :-

position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;

Let's discuss about all position values.

1. Static

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. static is by-default position in css.

2. Relative

This element is positioned according to the where the element was before situated and from there if we apply any properties like top, left, bottom, and right will apply. let's see an example to understand more.

3. Absolute

This element is positioned according to the webpage viewport height and width means it will count size from the border of your whole page when we use properties like top, right, bottom and left.

4. Sticky

This element is use when we want to stick any elements at some position and there will no effect apply on that element if we scroll the page. Many times you see in most of the websites that when we scroll page the navbar always remain on top and only remaining content scroll and it looks like navbar is also scrolling.

5. Fixed

This element is use when we want to fix any element at some position and it will not effected by scrolling the page. Many times we see in most of the website that bottom right corner chat icon always fix there like a fevicol.

Thanks for reading if this blog got helpful to you. so please like and share..