What is Position Property in CSS?

POSITION:-

The position property sets how an element is positioned inside a document. The elements are then positioned using the top, right, bottom and left properties. Positioning property allows us to take elements out of the normal document flow and make them behave differently.

There are five types of position values:-

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 and Z-index is set then there will be no effect on that element.

Relative:-

Elements original position remains in the flow of the document just like the static value. But we can move the element from its original position with the help of positional property top, left, bottom and right.

Absolute:-

The element is removed from the flow of the document ie, the original position. Element behaves according to the parent space or boundary wall. Using absolute property we can overlap the elements. With the help of positional property, we can move the element.

Fixed:-

The element is removed from the flow of the document but no space is created for the element in the document layout. Fixed-positioned elements are always relative to the document, not any particular parent and are unaffected by scrolling. Ex- Chat boat icons

Sticky:-

The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick. Sticky element changes its place and then sticks to its position. Ex- Navigation Bar