So, what is a position ?

The position in CSS is a property that defines how an element is positioned in the document with respect to the normal document flow, the top, right, bottom, and left properties defines the final location of the positioned elements. In short the position property can help you manipulate the location of an element.

These are the types of position properties :

Static :

position: 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. This is the default value.

Relative :

position: relative;

An element’s original position remains in the flow of the document, just like the static value, and then it offsets relative to itself based on the values of top, right, bottom,left and z-index. The offset does not affect the position of any other elements thus, the space given for the element in the page layout is the same as if position were static. The positional properties defines the final location of the element from its initial position in that direction.

Absolute :

position: absolute;

The element is removed from the normal document flow and other elements will behave as if it’s not even present, no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, left and z-index provided. This property can create stacking context based on the z-index when it's value not auto.

Fixed :

position: fixed;

The element is removed from the normal flow of the document and no space is created for the element in the page layout like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document/viewport, not any particular parent, and are unaffected by scrolling. The fixed positioned element's final position is determined by the values of top, right, bottom, left and z-index provided. This value always creates a stacking context based on z-index when it's value is not auto, the element is placed in the same position on every page.

Sticky :

position: sticky;

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block / nearest block-level ancestor, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay).

In simple words, the element is treated like a relative value until the scroll location of the viewport or end of page, reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.

Inherit :

position: inherit;

The position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

That's it for the blog. Hope this blog was helpful in understanding the conceps of positioning. New blog coming soon! stay tuned.