I know I am late but hope this helps.
Following are the values for the position property.
static
fixed
relative
absolute
position : static
This is default. It means the element will occur at a position that it normally would.
#myelem {
position : static;
}
position : fixed
This will set the position of an element with respect to the browser window (viewport). A fixed positioned element will remain in its position even when the page scrolls.
(Ideal if you want scroll-to-top button at the bottom right corner of the page).
#myelem {
position : fixed;
bottom : 30px;
right : 30px;
}
position : relative
To place an element at a new location relative to its original position.
#myelem {
position : relative;
left : 30px;
top : 30px;
}
The above CSS will move the #myelem element 30px to the left and 30px from the top of its actual location.
position : absolute
If we want an element to be placed at an exact position in the page.
#myelem {
position : absolute;
top : 30px;
left : 300px;
}
The above CSS will position #myelem element at a position 30px from top and 300px from the left in the page and it will scroll with the page.
And finally...
position relative + absolute
We can set the position property of a parent element to relative and then set the position property of the child element to absolute. This way we can position the child relative to the parent at an absolute position.
#container {
position : relative;
}
#div-2 {
position : absolute;
top : 0;
right : 0;
}
We can see in the above image the #div-2 element is positioned at the top-right corner inside the #container element.
GitHub: You can find the HTML of the above image here and CSS here.
Hope this tutorial helps.