CSS Position Property

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;
}