What are CSS Positions?

CSS Positions property is used to position an element in a particular place in a document. To align the elements, this property works with top, left, bottom, right, and z-index properties.

There are 5 values in position property they are:

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

1. Static

position: static

This is the default value of any element. The element is positioned according to the regular flow of the document.

In this top, left, bottom, right, and z-index properties do not affect the elements.

2. Relative

position: relative

This relative position remains in the regular flow of the document. Same as position: static But unlike static position, the top, left, bottom, right, and z-index properties affect the elements to offset.

3. Absolute

position: absolute

This absolute position is positioned relative to the parent or the root element. The element is removed from the regular flow.

In absolute position, the elements will behave as if that element is not in that document.

In this top, left, bottom, and right determine the position of the element.

4. Fixed

position: fixed

This fixed position is used for positioning in a fixed position anywhere in a document.

Here also the element is removed from the regular flow of the document. But always positioned relative to the root element.

5. Sticky

position: sticky

This sticky position is simply a combination of relative and fixed.

It will look like a relatively positioned element until we scroll about the element.