This is a very important property used to change the position of all the elements.
position
Applicable Values:
static
This is the default position value that is applied to all the elements.
Elements with “position : static” is displayed the same as normal flow.
relative
- Elements with “position :relative” will appear in normal flow.
- top, right, bottom and left properties will position the element as follows :
- The element will be offset with respective to its actual position.
- All the siblings next to the element will be positioned as if the element is not offset.
absolute
- Elements with “position : absolute” will be removed out of the normal flow.
- All the siblings (other elements next to the absolute element sharing same parent) will be positioned in normal flow without allocating space for the absolute element.
- top, right, bottom and left properties will position the element as follows :
- The element will be positioned with respective to the nearest parent element having “position : relative”
- If none of the parent elements have “position : relative”, then the absolute element will be positioned with respect to the <body> tag.
fixed
- Elements with “position: fixed” will be fixed to the viewport and does not move when scrolled.
- top, right, bottom and left properties will position the element same as the absolute element.
