Position

The position property is used to specify the type of positioning method used for an element. It determines how an element is positioned within a document, and it can affect the behavior of other elements as well.

There are five values of position: static, relative, absolute, fixed, and sticky.

1. Static (default value):

This sets the position of an element to its default, which means the element will flow into the page as it normally would, without any special positioning.

2. Fixed:

This sets the position of an element to a fixed position relative to the viewport, meaning it will remain in the same place even if the page is scrolled.

3. Relative:

This sets the position of an element relative to its default position, allowing you to offset it from that default position with top, right, bottom, and left properties.

4. Absolute:

This sets the position of an element relative to the nearest positioned ancestor element, or the viewport if there is no positioned ancestor.

5. Sticky:

This sets the position of an element to fixed within its parent container, but only after a certain threshold has been met. For example, an element with a position: sticky value will remain within its parent container until the user scrolls to a certain point, at which point it becomes fixed and stays in the same place on the screen as the user continues to scroll.