In this article, we gonna learn everything you need to know about position in CSS. Now the main Question is what is position property in CSS and why we use it. Don’t worry, here is your answer.
What is position in CSS?
The position property specifies how elements are placed in a document. Elements are placed using the top
, left
, bottom
, and right
properties. The top
, left
, bottom
, and right
properties define the final location of positioned elements.
Different position values.
There are five different position values.
static
relative
fixed
absolute
sticky
Static Position in CSS
Static position is a by default position value. The static position elements do not affect top, left, right, button, and z-index properties. The static position element, not positioned in any special way. These elements are always positioned according to the normal flow of the document.
position: static;
Relative Position in CSS
Relative is a normal position of the element. We can adjust the relative position elements by setting the top, bottom, right and left properties value. After setting up the top, bottom, left, or right properties values, no other content you can adjust to fit into any gap left by the element.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Position property</title>
<style >
.main-container{
width: 100%;
height: 500px;
background:#ee9;
}
.box{
width: 20%;
height: 30%;
position: relative;
background:#73AD21;
left: 30%;
top:6%;
}
</style>
</head>
<body>
<div class="main-container">
<div class="box"></div>
</div>
</body>
</html>
As a Result:

Absolute position in CSS:
An absolute position element, positioned relative to the nearest positioned ancestor. Absolute elements can either be bounded by the parent element or the viewport. The viewport is a default boundary. If you want to use the parent element as a boundary. It is possible if the parent has a relative position otherwise they cannot serve as a boundary.
Remember that a “positioned” element is one whose position is anything except static.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Position property</title>
<style type="text/css">
.main-container{
position: relative;
width: 400px;
height: 200px;
background:#ee9;
}
.box{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
background:#73AD21;
</style>
</head>
<body>
<div class="main-container">
<div class="box"></div>
</div>
</body>
</html>
As a result:

Fixed Position in CSS
A fixed position element, positioned relative to the viewport boundary. Which means it always stays in the same place even if you scroll the page. However,The top, right, bottom, and left properties, used to set the position of an element. A fixed element does not leave a gap in the page where it would normally have been located.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Position property</title>
<!-- <link rel="stylesheet" type="text/css" href="position.css"> -->
<style type="text/css">
.main-container{
width: 100%;
height: 900px;
background:#ee9;
/*position: relative;*/
}
.box{
position: fixed;
top: 4%;
right: 6%;
width: 300px;
height: 20%;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="main-container">
<div class="box"></div>
</div>
</body>
</html>
As a result.
Sticky Position in CSS
Sticky position is a combination of the fixed position and the relative position. However, it is based on the user’s scroll position. They are positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like fixed position). It is bounded by the parent element.
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top
, right
, bottom
or left
for sticky positioning to work.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Position property</title>
<!-- <link rel="stylesheet" type="text/css" href="position.css"> -->
<style type="text/css">
.main-container{
width: 100%;
height: 900px;
background-image: url("pic/4.png");
/*position: relative;*/
}
.box{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 2%;
background-color: #1ee;
width: 100%;
height: 5%;
}
</style>
</head>
<body>
<div class="main-container">
<div class="box"></div>
</div>
</body>
</html>
As a Result:
Hey, guys hope it helps. if you have any query regarding this you can ask in comment section.
Recommended Posts:
Most Popular CSS Frameworks in 2020
What is the Console in JavaScript.