CSS position property specifies how and where an element should be placed in the layout. This property has several values which help us to place an element anywhere in the document.
The position property takes help of the top, bottom, left and right properties to set the position of the element in the layout.
The position property accepts below 5 values:
- relative
- absolute
- fixed
- sticky
- static
Let’s discuss each value one by one in detail.
The position relative
An element having position: relative; is positioned relative to its original(default) position. Refer to the example below:
Example:
div{
position: relative;
top: 50px;
left: 50px;
}
The position absolute
An element having position: absolute; is positioned relative to the nearest positioned ancestor. An element is called a positioned element if it has its position other than static. If the element has no positioned ancestor, it is positioned relative to the viewport itself.
In the example below, the <div> element has no positioned ancestor. Therefore, it is positioned relative to the viewport itself. Try it out:
Example:
div{
position: absolute;
top: 50px;
left: 50px;
}
The position fixed
An element having position: fixed; is always positioned relative to the viewport. Such elements always stay on a fixed position and do not scroll along with the rest of the page. Refer to the example below:
Example:
div{
position: fixed;
top: 50px;
left: 50px;
}
The position sticky
An element having position: sticky; toggles between the relative and fixed positioning, depending on the scroll position. Its position is considered relative until you scroll the webpage to a certain point. Once this point is met, the element behaves like a fixed positioned element and it becomes sticky at that position even if you scroll the webpage.
The position: sticky; is generally used to make sticky headers in the website designing. Refer to the example below:
Example:
div{
position: sticky;
top: 50px;
left: 50px;
}
The position static
This is the default value. An element having position: static; is positioned according to the normal flow of the layout. Such elements are not affected by the top, left, right, or bottom properties. Refer to the example below:
Example:
div{
position: static;
top: 50px;
left: 50px;
}
CSS Syntax
The position property has the below syntax:
position: static|relative|absolute|fixed|sticky|initial|inherit;
Property Values
The position property accepts the following values:
| static | This is the default value. Elements are positioned according to the normal flow of the layout. The left, right, top and bottom properties have no effect on such elements. |
| relative | The element is positioned relative to its original(default) position. |
| absolute | The element is positioned relative to its nearest positioned ancestor. If no ancestor is positioned, it is positioned relative to the viewport itself. |
| fixed | The element is positioned relative to the viewport. The element becomes fixed at the specified position and does not scroll along with the webpage. |
| sticky | The element toggles between the position relative and fixed based on the scroll position. The element behaves as a relatively positioned element until you scroll the webpage to a certain point. Once that point is reached it behaves like a fixed positioned element and becomes sticky at that point and does not scroll along with the webpage. |
| initial | Sets the position property to its default value(static). |
| inherit | Inherits the position property from its parent element. |
General Info
| Default Value | static |
| Inherited | No |
| JavaScript Usage | element.style.position = “relative”; |
