Learning positions

The position property helps to manipulate the location of an element. When the position property is set to values like static(default), fixed, sticky, relative or absolute, Then the position properties like sets the final position of an element in the document. Position property defines the type of positioning and relativity of positioning that can be given to an element. Only after applying the position property it allows to define the top, left, right, and bottom properties of an element.

Position properties

syntax position: static | relative | absolute | fixed | sticky |

Lets look at this example:

static

Every element has a static position by default. That is, the element is positioned according to the normal flow of the document. So the values of top, left, bottom, right will not have any effect on the element. The space given for the element in the document layout will be the same as if positioned static

relative

When positioned relative, the original position of the element will remain as per the normal document layout, just like the static value. But now the top, left, bottom, and right values will have an effect on the element. The positional property moves the element from its original position to the new specified position with respect to the original position.

absolute

The element is originally positioned as per the document flow. when given position absolute, the element is removed from the flow of the document and moves to the new specified top, left, bottom, and right value. The element is moved from its original position with respect to its parent container. The position values top, left, and bottom. right are calculated relative to the parent container.

fixed

When a position is given fixed, the element is removed from the normal document flow and stays fixed to a location. Even if the web page is scrollable to view more content, the fixed element stays permanent on that position while other non-fixed elements scrolls. The location of the element can be specified using top, left, bottom, and right values.

sticky

Initially, the element is treated just like a relative until the scroll location of the viewport reaches a specified value, then the element acts like a fixed element where it is told to stick. this specified value where it holds and becomes fixed is given by top, left, bottom, and right values.