As we know, we can use CSS to design our website. so in the website, there are multiple layers and containers through which we create the structure of any website. so for stylish layouts, we need to position the layers, containers, elements etc. for a great user experience on our website. for that, we use the CSS Position property to position the layers, containers & elements.
Introduction
CSS Position property has four values: relative, absolute, fixed and static but in this article, we will focus on the absolute & relative positions.
The default position of any element is static means if you don’t specify any position value then the default position of that element it’ll be static i.e no specified position.
<!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>CSS Position: absolute vs relative</title>
<link rel="stylesheet" type="text/css" href="position.css">
</head>
<body>
<div id="parent">
<div id="one">Div 1</div>
<div id="two">Div 2</div>
<div id="three">Div 3</div>
</div>
</body>
</html>Now add some CSS to it.
#parent {
border: 2px solid red;
padding: 20px;
width: 50%;
color: white;
}
#one {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#two {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
#three {
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
}Output
Relative position
- It means that the element is going to adjust/position from its previous normal position.
- The element will get positioned according to the specified distance but no element can fill the space of the previously positioned element.
now add the specified position to the CSS of Div 2.
COPY
#two {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
position: relative;
top: 50px;
left: 50px;
}Output
Absolute Position
- When we specify position absolute it means that the element is going to adjust the position respective to the nearest positioned(either relative, absolute or fixed) parent element.
- if there is no positioned parent element for that particular element then it will adjust the position respective to the body.
- Case 2: If we will specify position absolute to any element & will not specify any of these positions:
top,bottom,leftandrightthen that particular element will vacant their space at that position & other elements will occupy their position but that particular element will still be at that position.
Example
<!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>Absolute position</title>
<link rel="stylesheet" type="text/css" href="absolute.css">
</head>
<body>
<div id="parent">
<div id="one">Div 1</div>
<div id="two">Div 2</div>
<div id="three">Div 3</div>
</div>
</body>
</html>Now add some CSS to it
#parent {
border: 2px solid red;
padding: 20px;
width: 25%;
color: white;
margin: 100px;
position: relative;
}
#one {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#two {
width: 100px;
height: 100px;
background-color: rgba(11, 11, 231, 0.976);
display: inline-block;
position: absolute;
}
#three {
width: 100px;
height: 100px;
background-color: black;
display: inline-block;
}Output
you can clearly see 👆 that Div3 has overlapped the position of Div2 due to vacant space created by Div2
Case 2: now, when we specify position with left, right, top, and bottom attributes then it will adjust the position according to positioned parent element or with the body when there is no positioned parent element.
position: absolute;
top: 0px;
left: 0px;
Thank you for reading.