What are the different types of positioning methods of the position property and how do they function differently from one another?
There are five different position values:
staticrelativefixedabsolutesticky
Static is the default position. The elements that are positioned static are not affected by the other properties like top, left etc. The elements are rendered with the normal flow of the page.
Relative positioning moves the element top, bottom,left and right from the place it was supposed to be placed if the static property were to be used.
Note: Spaces between elements are not filled automatically in this case.
Fixed as the name suggest is fixed to the view-frame of the page. i.e. even if you scroll the page it stays in the same location.
Absolute unlike the name suggest isn’t fixed.(Pun intended xD). It’s position depends upon the nearest elements that has the position property other than ‘static’. Unlike fixed this moves along with scrolling.
it is usually used along with ‘fixed’ and ‘z-index’ to create overlays.
Sticky positioning is much like freezing rows in MS excel or that chat bots on the bottom right of many web-pages. The scroll in the viewport but when are about to be out of site they stick to the top or bottom sides.
Don’t forget to leave a 
if the reply helps you.
3 Likes