The CSS position property is used to specify where exactly an element is to be displayed on the page. When this property is paired with the the top, right, bottom, and left CSS properties without which the positioning would not be completed. The position property must be added before the other adjustments to position (top, bottom, left, right) as it determines the final location of the element. While styling, CSS positions are highly significant as they help us to place objects which otherwise can be a tedious job.
Position property in CSS shows the kind of positioning method used in the placement of an object or element & there are five types of positions used in the CSS :-
1. Static Position
selector {
position: static;
}
The static position is the default value for any HTML element. It makes the element follow the standard HTML flow, putting each element after the previous element and before the next element in a sequence on the DOM as they are generally placed. These elements are not positioned manually but are already in place with the DOM and move in flow with the image.
Static position elements are not affected by the other properties like top, bottom, left and right.
2. Relative Position
selector {
position: relative;
top: 60px;
left: 50px;
}
An element whose position is set to relative will be moved or placed relative to the original position of itself. The relative value works similar to the static position, the only difference is that we can set top, right, bottom and left values for this element. These adjustments will move the object from the original position.
3. Fixed Position
selector {
position: fixed;
top: 0;
}
Elements with their position set to 'fixed' are placed relative to the viewport and they stay in the fixed position of the page even when the page is scrolled they stay in the same position. The top, bottom, right and left properties are used to position the element.
4. Absolute Position
selector {
position: absolute;
top: 60px;
left: 50px;
}
Elements set to 'absolute' position are placed relative to the parent element. However in the absence of parent element, they are placed relative to the page and move along when the page is scrolled. The top, bottom, right and left properties are used to position the element. These elements are removed from the normal flow and can overlap other elements.
5. Sticky Position
selector {
position: sticky;
}
Sticky position places the element as the relative in the page as far as the viewport reaches the threshold position where it sticks to behave like a 'fixed-position' element. It stays in the fixed place even when the page is scrolled.
Credits : For illustrations- Higor Neves Marques (Dev articles)