The position is a CSS property that sets the positioning of elements for top, right, bottom, and left in a document.
There are five types:
Static
Fixed
Sticky
Relative
Absolute
Static:
The element which positioning according to the flow of the document. the top, right, bottom, and the left doesn't apply. that means if we apply the static property to an element it won't change its current position
as you see in this result I applied static property to the highlighted element I gave the top and left values but it won't change its position at all
Fixed:
The element is removed from the normal document flow and no spaces are required for this element in the page layout. it is fixed at one position in the document, other elements flow through this fixed element. we give top, right, bottom, and the left to assign a position
syntax: position: fixed;
Here you see the Q/A box at the corner of the layout. whenever we scroll the page paragraphs go behind the Q/A box. it didn't cover any space.
Sticky:
This property goes with the flow of the document but the values of top, right, bottom, and the left given to this element it sticks when offset makes contact. it will follow the ancestor before the element then sticks when it scrolls out.
As you see in this example the nav bar sticks at the top of the document when the H1 sticky scrolls away. I set the value of top:0px so it sticks to the top of the page and other contents flow through it.
Relative:
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if the position were static.
In the above example, I gave position:relative to the element three and the values of top & left then the element moved over the fourth element but the space of the three left remains empty no other element is occupied when its away, thus the three element moves according to their initial position.
Absolute:
the element removed from the normal document flow. it takes the positioning of the closest element near to it otherwise, it acts according to the page layouts positioning, no spaces were appears when we set the values of top, right, bottom, and left .
As you see the three-element starting place is in between the two & four elements, whenever we applied absolute and gave values top and left to it, then it was removed from its initial position and positioned according to the page layout.
references:
THANK YOU FOR YOUR TIME