CSS Position Property - Simplest explanation
As usual, I focus on short explanations...
Hello everyone! Now this is one of the most dreaded CSS properties and I will be honest with you here. I have spent hours and hours drilling my brain as to how my document would get fixed with positioning certain elements, when to use which type of position and so on...
But once understood in simple terms, it is a walk in the park to grasp.
THAT I CAN GUARANTEE :)
So mostly we focus on five types of positioning and I would limit my focus on that only because lets admit it we all want to read less of theory and do more practicals. Having said that it is my humble request to quickly get through this article and start coding and practising :)
POSITION
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
Syntax
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
Values used for manipulation
/* Exact Values just used for demonstration, change as per your will */
top: 5px;
bottom: 10px;
left: 2px;
right: 8px;
Static
- Default position for all elements.
- Element positioned in normal flow of DOM.
- The top, right, bottom, left, and z-index properties have no effect.
Relative
- Element's position offset relative to itself based on the values of top, right, bottom, and left.
- Reference point here is the original position of the element itself.
- Element positioned in normal flow of DOM.
Absolute
- Element's position offset relative to closest ancestor who has "position: relative" or if no ancestor is relatively positioned, then it is offset relative to initial block which is the html document itself.
- Reference point here is closest ancestor having "position: relative" or HTML document itself.
- Element removed from normal flow of DOM.
- Other elements take up the void left by the element.
Fixed
- Element's position offset relative to initial block which is the HTML document itself.
- Reference point here is HTML document itself.
- Element removed from normal flow of DOM.
- Other elements take up the void left by the element.
Pretty confusing eh ????
No worries !!! The below example explains it all :)
//HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
<div class="sticky">Sticky</div>
</body>
</html>
/* Original CSS */
div{
border: 2px solid black;
height: 100px;
width: 100px;
text-align:center;
font-size: 25px;
}
.static{
background-color: aquamarine;
}
.relative{
background-color: orange;
}
.absolute{
background-color: burlywood;
}
.fixed{
background-color: pink;
}
.sticky{
background-color: royalblue;
}
Original position of 5 div elements :
Now notice closely how applying the position property changes behaviour of each element:
Static
.static{
background-color: aquamarine;
position: static;
top: 10px;
left: 20px;
}
Relative
.relative{
background-color: orange;
position: relative;
top: 50px;
left: 50px;
}
Absolute
.absolute{
background-color: burlywood;
position: absolute;
top: 50px;
left: 50px;
}
Fixed
.fixed{
background-color: pink;
position: fixed;
top: 50px;
left: 50px;
}
Sticky
.sticky{
background-color: royalblue;
position: sticky;
top: 50px;
left: 50px;
}
Still little choppy around the edges of the braincells eh ???
Let us understand two of the position properties - absolute and sticky again using a different example :
Absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position Property</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="static">Static</div>
<div class="relative">
Relative
<div class="absolute">Absolute</div>
</div>
<div class="fixed">Fixed</div>
<div class="sticky">Sticky</div>
</body>
</html>
div{
border: 2px solid black;
height: 100px;
width: 100px;
text-align:center;
font-size: 25px;
}
.static{
background-color: aquamarine;
}
.relative{
background-color: orange;
position: relative;
}
.absolute{
background-color: burlywood;
position: absolute;
top: 50px;
left: 50px;
}
.fixed{
background-color: pink;
}
.sticky{
background-color: royalblue;
}
Sticky
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position Property</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="outer">
Outer
<div class="sticky">Sticky</div>
</div>
</body>
</html>
.outer{
background-color: pink;
border: 2px solid black;
height: 1500px;
width: 1500px;
text-align:center;
font-size: 25px;
}
.sticky{
background-color: royalblue;
border: 2px solid black;
height: 300px;
width: 300px;
text-align:center;
font-size: 25px;
position: sticky;
top: 50px;
left: 50px;
}
Before scrolling :
After scrolling :
So I hope this helps clarify the position property of CSS to all of you.
In case of any further doubts, do not hesitate to hit me up !!!