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:
- Static
- Relative
- Absolute
- Fixed
- 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.