Position
Position is CSS property using which we can decide where element is positioned in a document.
There are five different positions values:
static
relative
absolute
fixed
sticky
Every elements are positioned using the top, bottom, left and right properties. But this properties will work only after position property is set.
Static
HTML elements are positioned static by default.
Element having position value static are not affected by top, bottom, left and right properties.
.container { position: static; }
relative
In relative position element will be placed relative to its relative position. By changing top, bottom, right and left properties we can change element position from its original position. An element's original position will remain in the flow of document.
.container { position: relative; }
absolute
In absolute position element will be placed relative to is nearest ancestor element. By changing top, bottom, right and left properties we can change element position relative to is nearest ancestor element. Absolute positioned elements are removed from the normal document flow, and can overlap elements.
.container { position: absolute; }
fixed
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. Fixed positioned elements are removed from the normal document flow.
.container { position: fixed; }
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.
.container { position: sticky; }