Css Positions: They help in positioning the elements in a document. We have main 5 position values which are Static, absolute, Fixed, Sticky And Relative.

We will one by one checkout these Position values.

With the help of this example we will understand these css positions easily.

Static:

This is the default Position of any element. It is positioned according to the normal flow of the document. The top right left properties does not have any effect.

In the Above Example you can see we have given static position to all the paragraphs . As you can see the position of these paragraphs didnot change. The paragraphs are positioned as they were used to be placed earlier without the position static property.

Fixed:

In this the element is removed from the normal document flow. It gets fixed and once Its secured it does not change its position till the end of the document. We can move it from top, right left & bottom to decide its final position. The user cannot move the element from the document.

In the Above Example the Text 'Made By Mom' is a Fixed element. Even when the page is Scrolled down the Text does not change its position. It remains in the same place till the end of the document.

Sticky:

In this the element also sticks to the page as the page scrolls similar to that of fixed.But the prime difference here is that it starts sticking to the top of the docment after a certain offset. It toggles between relative and fixed position ,according to the scroll. It will get more clear with the help of the above example .In the given example we have a paragraph before the element shopping list . At the start of the document it behves like a regular element but after reaching a certain offset it sticks to the top till the end of the document. This is generally used in Navbar.

Relative:

If we give relative as a position to any certain element it stays in the normal flow of the document unless and untill we mention the top right left bottom properties.It also does not affect the position of other elements. We will back this up with an example.

Absolute:

When an element is positioned absolute it simply is positioned relative to its positioned ancestor or it is positioned relative to the main block. It also breaks itself from the current flow of the document.For eg.

Having said that, we have now finally learned the five main css positions and how these elements are positioned with the help of them.

Thankyou ! Happy Reading !