Why do we use position property in CSS?

The CSS position property is used to specify where an element is displayed on the page. When paired with the the top, right, bottom, and left CSS properties, the position property determines the final location of the element.

What is Position?

The CSS position property is used to set position for an element. it is also used to place an element behind another and also useful for scripted animation effect.

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

Types of positions in CSS

1. Static

This is a by 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.

2. Relative

The relative positioning property is used to set the element relative to its normal position.The positional properties “nudge” the element from the original position in that direction with respect to its parent element.

3. Absolute

The absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML.

With the absolute positioning, you can place an element anywhere on a page.

4. 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.

5. Sticky

When an element is positioned relative to the viewport using this value, it will stay in position even if the user scrolls the page. To pinpoint the precise location of the element, use its top, right, bottom, and left properties.

Difference between Sticky and Fixed!