The Position property of CSS is used for positioning/ locating the element inside the document. These properties are:
- Static
- Relative
- Absolute
- Fixed
- Sticky
1. Static Positioning
This is present by default in every HTML element. It is unaffected if properties like a top, left, right, and the bottom is applied. It is always positioned with the normal flow of the HTML page.
Example:
2. Relative Positioning
This property is used to set the element relative to its normal position. It gets affected when properties like a top, left, right, and bottom is applied.
3. Absolute Positioning
This property is used to position elements relative to the first parent with a non-static position. If no such element is found, the contained block is HTML.
4. Fixed Positioning
Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the element.
One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen.
5. Sticky Positioning
The element is positioned based on the user's scroll position. Position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element.
