Position
In CSS the position property is used to set the position of an element. By applying the position property we can use top, left, bottom and right position to setup an element at a particular place in our webpage. The default value of position is static. There are a total of 5 position property available in CSS.
Types of Position
1. Static(Default)
This is the default value of position. The top, left, bottom and right position values will not work if we use position as static.
Syntax
element{
position: static;
}
Eg.
2. Fixed
As the name suggests it will make the position of an element as fixed. The the element will not change its position even if we scroll the webpage. We can use the top, left, bottom and right position values to set the position of our element in a webpage. Various website uses the fixed position to position there chat window.
Syntax
element{
position: fixed;
top:20px;
right:40px;
}
3. Sticky
As the name suggests the element will stick to the position when a particular offset is achieved. If that offset is not achieved the sticky position will not play its role. Various website uses the sticky position to position there Navbar. We can use the top, left, bottom and right position values to set the position of our element in a webpage.
The main difference between the position fixed and sticky is that the element declared with the position fix will not change its place even if we scroll the web page up and down, but the element with position sticky will behave like regular element until a particular offset is achieved and then it will become fixed to that position.
Syntax
element{
position: sticky;
top:10px;
}
4. Relative
When we apply relative position property to an element it will adjust based on is normal position. For example if we apply top 10 px it will shift 10 px from the its current position. We can use the top, left, bottom and right position values to set the position of our element in a webpage. If we do not give any position value to the element having position as relative then the element will behave as position static.
Syntax
element{
position: relative;
top:10px;
}
5. Absolute
It is used to position an element based on its nearest parent element. If there is no closest parent element then it will take body as his parents element. Absolute position elements are removed from normal document flow, no extra spaces created for this element and it can overlap the other elements. If we want to move over element based on its parent element then we use position absolute. We can use the top, left, bottom and right position values to set the position of our element in a webpage.
The main difference between the position absolute and position relative is that the element with position absolute will move based on it parent element whereas the element with position relative will change its position with respect to its current position.
Syntax
element{
position: absolute;
top:10px;
}