CSS Position Property

CSS Position Property

·

1 min read

The position property is used to manipulate the location or position of an element. You can position an element using the top, bottom, left and right properties. These properties can be used only after the position property is set first. A position element's computed position property is relative, absolute, fixed or sticky.

Let's have a look at the following CSS positioning:

static :

This is a default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.

Example:

fixed :

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window and doesn't move even you scroll the window.

Example :

absolute :

In absolute positioning, the element is removed from the flow and relatively positioned to its first non-static ancestor.

Example:

relative :

The relative positioning property is used to set the element relative to its normal position.

sticky :

A sticky element toggles between relative and fixed, depending on the scroll position.

Example :