What is CSS Position Property?

CSS position property is used to set the position of an element on a web page. The top, bottom, right, and left properties are used to position the elements but it works only when the CSS position property is defined.

Syntax: selector{ position : position value;}

Position Values

There are five types of position values:

• Static

• Relative

• Absolute

• Fixed

• Sticky

1. Static

Element is positioned static by default, which means properties like the top, bottom, right, and left have no effect on the element, it will be positioned according to the flow of the page.

For example:

.box-1{
position: static;
top: 50%;
left: 30%;
padding: 10px;
margin: 10px;
height: 30px;
border: 2px solid #070707;
background-color: #4438b0;
color: #ffffff;
}
/* In the above example the position is static but the top and left
 properties also applied beside that static box did not move.*/

Output:

2. Relative

In relative position, the element moves from its normal position concerning the top, bottom, right, and left properties value. The position will not affect the other elements' position. After being positioned relative element does leave space from where it was placed before.

For example:

.box-2{
position: relative;
top: 50px;
left: 20px;
padding: 10px;
margin: 10px;
height: 30px;
border: 2px solid #070707;
background-color: #b5221f;
color: #ffffff;
}
/* In the above example the position is set to relative and it moves 20px 
from the left and 50px from the top from its normal position.*/

Output:

3. Absolute

In absolute position, the element is positioned relative to its nearest positioned parent instead of positioned relative to the viewport. If the positioned relative is not defined then the element will adjust relative to the document's body. After being positioned absolute element does not leave space from where it was placed before.

For example:

.box-3{
position:  absolute;
top: 10px;
left: 20px;
padding: 10px;
margin: 10px;
height: 30px;
border: 2px solid #070707;
background-color: #145201;
color: #ffffff;
}
/* In the above example, the position is set to absolute, and the element is
 adjusted relative to the document body 20px from the left and 
10px from the top.*/

Output:

4. Fixed

In fixed position, the element is positioned relative to the viewport means it always stays at the same place and scrolls with the page. The top, bottom, right, and left properties are used to position the element. After being positioned fixed element does not leave space from where it was placed before.

For example:

.box-4{
position:  fixed;
top: 20px;
padding: 10px;
margin: 10px;
height: 30px;
border: 2px solid #070707;
background-color: ##059fb7;
color: #ffffff;
}
/* In the above example, the position is set to fix, and the element is
 adjusted relative to the viewport 20px from the top and scrolls with
the page.*/

Output:

5. Sticky

In the sticky position, the element is positioned based on the user's scroll position means it does not move unless the top edge of the page touches it, as soon as it touches the top edge of the page it starts scrolling with the page like fixed position. The offset does not affect the other elements.

For example:

.box-5{
position:  sticky;
top: 10px;
padding: 10px;
margin: 10px;
height: 30px;
border: 2px solid #070707;
background-color: #39e842;
color: #ffffff;
}
/* In the above example, the position is set to sticky, and the element is 
positioned based on the user's scroll position and when it touches the top 
edge of the page it becomes fixed to the top 20px.*/

Output: