The CSS position property controls how an element is positioned on a webpage.
There are 5 types of Position in CSS:
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
1. position: static :
This is the default position of every HTML element.
.box {
position: static;
}
2. position: relative :
The element stays in the normal document flow, but you can move it relative to its original position.
.box {
position: relative;
top: 20px;
left: 30px;
}
3. position: absolute :
An absolute element is positioned relative to its nearest positioned ancestor.
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
right: 20px;
}
4. position: fixed :
A fixed element is positioned relative to the browser viewport.
It stays in the same place even when you scroll.
.button {
position: fixed;
bottom: 20px;
right: 20px;
}
5. position: sticky
sticky behaves like relative initially, but when you scroll to a specified position, it sticks there.
.navbar {
position: sticky;
top: 0;
}