The CSS Position property is used to set or move our element anywhere on the webpage.
There are 5 CSS Positions and they are as follows:
- Static
- Relative
- Absolute
- Fixed
- Sticky
Here is the HTML for the examples given below:
HTML
<body>
<div class="container">
<div class="boxone box"></div>
<div class="boxtwo box "></div>
<div class="boxthree box"></div>
</div>
</body>
1. Static
It is a default property. The element is positioned according to the normal flow of the document. The top, right, bottom, left and z-index won't change the position of the element.
Syntax: position: static;
2. Relative
The element is positioned according to the flow of the document and then offset relative to its own position by using top, right, bottom, and left. It won't change the position of other elements.
Syntax: position: relative;
Example
CSS
body{
background-color: #35BDD0;
}
.box{
width: 150px;
height: 150px;
background-color: #fff;
}
.boxone{
background-color: #E07C24;
position: relative;
left: 100px;
top: 100px;
display: inline-block;
}
.boxtwo{
background-color: #8D3DAF;
display: inline-block;
}
.boxthree{
background-color: #242B2E;
display: inline-block;
}
3. Absolute
The element will be removed from the normal flow of the document and then positioned relative to its closest parent. Its position is also affected by top, right, bottom, and left.
Syntax: position: absolute;
Example
CSS
body{
background-color: #35BDD0;
}
.container{
position: relative;
width: 400px;
height: 100px;
background-color: antiquewhite;
padding: 10px 0;
}
.box{
width: 100px;
height: 100px;
background-color: #fff;
}
.boxone{
background-color: #E07C24;
position: absolute;
right: 0;
display: inline-block;
}
.boxtwo{
background-color: #8D3DAF;
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.boxthree{
background-color: #242B2E;
display: inline-block;
}
In the above example, the container is the parent of the three boxes and hence all the boxes are positioned relative to the container. Its position will be determined by the values of top, right, bottom, and left.
4. Fixed
The element will be removed from the normal flow of the document and its position will be fixed on the viewport.
Syntax: position: fixed;
Example
CSS
body{
background-color: #35BDD0;
height: 300vh;
color: #fff;
font-size: 20px;
}
.container{
width: 400px;
height: 100px;
background-color: antiquewhite;
padding: 10px 0;
height: 100vh;
}
.box{
width: 100px;
height: 100px;
background-color: #fff;
}
.boxtwo{
background-color: #8D3DAF;
display: inline-block;
position: fixed;
top: 30%;
}
5. Sticky
The element will stay in the normal flow of the document and then offset relative to its closest scrolling parent based on the values of top, right, bottom, and left.
Syntax: position: sticky
Example
CSS
body{
background-color: #35BDD0;
height: 300vh;
color: #fff;
font-size: 20px;
}
.container{
width: 400px;
background-color: antiquewhite;
padding: 10px 0;
height: 100vh;
}
.box{
width: 100px;
height: 100px;
background-color: #fff;
}
.boxone{
background-color: #E07C24;
position: sticky;
left: 250px;
top: 100px;
display: inline-block;
}
.boxtwo{
background-color: #8D3DAF;
display: inline-block;
position: fixed;
top: 10%;
left: 1%;
}
.boxthree{
background-color: #242B2E;
display: inline-block;
display: none;
}