The CSS position property is one an awesome property in CSS. It helps to create new design possibilities, but can be difficult to understand. After reading this, you will be capable of using position property and have a good insight about the same.

position: static

position:static is the default value and no one uses this one, yet it is a very useful one . This property just means that it will follow the normal flow of the the web document. The statically positioned elements will never have the properties like z-Index ,top, left, right.

position: relative

This is a magic keyword. By using position : relative , you now have the control to position via the properties like z-index , left,right,bottom.

Suppose we have two classes .one and .two, If you just give position relative there will not be any change just like position :static.

But if you use properties like top, bottom, left or right then you can see the magic:

Here you can use the Z-Index which will help you to bring something front. For example, you can bring the red cube to the front using z-index:1000 .

position: absolute

This absolute property will completely remove the element from the normal flow of the document.

You can position this element anywhere with respect to its relative parent.

You can position this anywhere according to your choice with properties like right, left, bottom, top.

position: fixed

fixed position is a bit like absolute position in that it removes the element from the document flow, but fixed position elements are always positioned relative to the screen no matter what position their parent elements are.

As you can see above, I'm at the center of the page but still, it is fixed at that position.

position: sticky

This sticky property is to fix something until the page scrolls to a point where the element hits the top, left, right, or bottom value specified.

Conclusion

We have discussed positioning in CSS which includes:

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

There are several properties available for positioning but hopefully you now know when to make use of each.

I hope you have found this useful. If so, be sure to share and comment.