Positions in CSS

Position helps you to position a element in the according to the position property. The top, right, bottom and left properties helps us to shift a element to a desired position.

Values for the position property

• static
• relative
• absolute
• fixed
• sticky

1. Static

   This is the default value of position. The element is positioned according to the normal flow of the document. The top, right, bottom, left properties have no effect.

2. Relative

   When the relative value is applied to the position property, the element's initial position is itself and is changed using the top, right, bottom and left properties. Even if the element is shifted from its initial position the space assigned for the element in the document is not reduced.

   https://codepen.io/om0201/pen/WNzObeo

3. Absolute

   When position: absolute; is applied the element is removed from the normal document flow, and no space is created for the element in the page layout. The initial position for the absolute value is relative to its closest ancestor which has a position property other than static.

   https://codepen.io/om0201/pen/qBojEOg

4. Fixed

   The fixed value for the position property is applied when the element should not disappear from the screen. Its initial value is determined according to the viewport.

   https://codepen.io/om0201/pen/BarZovy

5. Sticky

   When position of a element is set to sticky, then it is positioned according to the normal flow of the document, and || after the top, right, bottom and left properties are met then its position is set according to the nearest scrolling ancestor and containing block. The sticky value behaves as a relative value and when top, right, bottom and left properties are met it behaves as a fixed positioned element.

   https://codepen.io/om0201/pen/gOeRPdL