CSS Positions allow you to manipulate how elements are positioned  to achieve many different visual effects. In this post today, we’re going a little deeper to understand CSS positioning.

There are basically 5 values but essentially only 4 values are commonly used.

 Static : – This the default value all the elements have unless we change that to something else. 

Relative : –

1. Positioning a element Relative will allow us to do couple of thing. We can set position the element Right, Left, Top, and Bottom from where it actually situated. Simply we can move it around. 

2. It allows it’s child element to positioned absolutely relative to it by setting the child to Position:absotute; Top: Value, Left: Value.

Absolute: – 

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.This value creates a new stacking context when the value of z-index is not auto.

The margins of absolutely positioned boxes do not collapse with other margins.

Fixed: – 

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

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), including table-related elements, 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), even if that ancestor isn’t the nearest actually scrolling ancestor.