Skip to main content

What is positions in css

In CSS, the position property determines how an element is positioned within its parent container or viewport.

Static

This is the default value. Elements with position: static are positioned according to the normal flow of the document. Static position helps us to reset any other position and bring back default. and top, right, bottom, left, and z-index properties have no effect on static element.

Relative

Elements with position: relative are positioned relative to their normal position. You can then use the top, right, bottom, and left properties to offset the element from its normal position

Absolute

An absolute positioned element is positioned relative to the first parent element that has a position other than static You can also use the top, right, bottom, and left properties to position the element precisely.

sticky

Elements with position: sticky are positioned based on the user's scroll position. They behave like relative positioning until the element reaches a specified point, then they "stick" in place.

Fixed

Fixed Elements with position: fixed are positioned relative to the viewport, which means they always stay in the same place even if the page is scrolled