What are the differences between relative, absolute, and fixed positioning?


#html

 

#css



The position property specifies the type of positioning method used for an element.
-Relative - the element is positioned relative to its normal position.
-Absolute - the element is positioned absolutely to its first positioned parent.
-Fixed - the element is positioned related to the browser window.
-Sticky - The element is positioned based on the user's scroll position.
-Static - Static is default value of position in css.

Playground

This box is relative.
relative {position:relative}
Absolute
{position:absolute;
top:0;right:0;}
Fixed {position:fixed;
bottom:100px;
right:100px;}

This playground is relative postion. And I tested pink box set relative position and it looks like positioned relative to itself.
I set absolute position green box set top:0 and right:0 This element is relative to its parent. But the fixed position is very interesting. The position of this brown box starts from the top left corner of the browser, which means it is fixed to the viewport. It will remain in one spot in the browser and is not affected by scrolling up and down.


positioning-css

above image is more about the CSS position property