Why do we use position property in CSS?
Elements on a web page can be positioned differently using the CSS position property. It lets you specify the relationship between a component and its parent element or viewport.
Types of positions in CSS
There are four different values that can be used with the position property:
1. Static
This is the default value. The element is placed in accordance with the normal flow of the document. The top, right, bottom, left, and z-index attributes are all inert i.e does not affect the position of the elements.
2. Relative
An element with position: relative; is positioned relative to its normal position.
A comparably positioned element will be moved from its default position if the top, right, bottom, and left properties are changed. Additional content won't be changed to fill in any gaps the element could leave.
3. Absolute
An absolutely positioned element is removed from the flow, and other elements are positioned without it. The position of the absolutely positioned element is determined by its closest-positioned ancestor.
A positioned ancestor is positioned in relation to the initial containing block (ICB), which is the containing block of the document's root element if one doesn't already exist.
4. Fixed
When an element is positioned relative to the viewport using this value, it will stay put even if the user scrolls the page. To pinpoint the exact location of the element, use its top, right, bottom, and left properties.
5. Sticky
When an element is positioned relative to the viewport using this value, it will stay in position even if the user scrolls the page. To pinpoint the precise location of the element, use its top, right, bottom, and left properties.
Difference between Fixed and Sticky!
| Fixed | Sticky |
| Fixed properties remain in place regardless of scrolling and are fixed to the viewport. | Sticky attribute has the ability to scroll to a user-provided offset value. |
| Fixed properties do not take up extra space and do not affect how other elements flow on the page. | The sticky feature does affect how the other elements flow on the page because it takes up additional space. |
| supported by all browsers. | supported by only modern browsers. |
Positioning in CSS consists of this. I am quite grateful if you have read this far. Please share your thoughts and feel free to connect with me.