In CSS, there are the following possible values for the ‘position’ property:
Static: This is the default position for all HTML elements. Elements remain in their normal flow within the document and follow the HTML structure.
Relative: Elements with the ‘relative’ position follow their normal document flow but can be shifted from their original position.
Absolute: Elements with the ‘absolute’ position do not follow the normal document flow. They are positioned relative to their closest positioned ancestor. If there is no ancestor, the element will be positioned relative to the viewport.
Fixed: Elements with the ‘fixed’ position are positioned relative to the viewport and remain fixed even when the page is scrolled.
Sticky: Elements with the ‘sticky’ position are positioned based on the user’s scroll position.
By using the ‘position’ property effectively, we can achieve the desired layout and interaction in our web pages with a solid grasp on the positioning of elements.
Lets start exploring them in further depth.
Static position:
This is the default behavior for all HTML elements’ position. In this position, elements are placed within the normal flow of the document, meaning they appear one after another, following the HTML structure. In this mode, the position of elements is determined by their margins and padding.
Applying the top, right, bottom, or left properties to statically positioned elements won’t have any effect. The ‘z-index’ also does not apply to statically positioned elements.
Relative position:
When you set the ‘position’ property to ‘relative,’ the elements still follow their usual document flow, but you have the flexibility to move them from their original position using ‘top,’ ‘right,’ ‘bottom,’ and ‘left’ properties.
With this property, the other elements around it won’t be affected, but the element will occupy the space where it would have been in its original position.
Absolute position:
When you set the ‘position’ property to ‘absolute,’ elements break away from the normal flow of the document. They do not follow the usual order in which elements appear on the page. Instead, the element’s position is determined relative to its nearest ancestor element with a positioning of ‘relative,’ ‘absolute,’ ‘fixed,’ or ‘sticky.’
Fixed position:
When you use the ‘position: fixed’ property, elements stay fixed in their position relative to the viewport. This means that the elements will remain in the same spot on the screen even when you scroll the page.
Sticky position:
When you use the ‘position: sticky’ property, elements stick to the user’s scroll position. It acts like a relative element until the user scrolls to a certain point, and then it becomes fixed relative to its parent element or the viewport.