Introduction
The absolute and relative position in CSS are two key positioning methods used to control the placement of elements on a web page. The relative position moves an element based on its normal position, while the absolute position places an element relative to its nearest positioned ancestor or the document itself.
In this article, you will learn the syntax, differences, and practical usage of absolute and relative positioning in CSS.
What is Relative Positioning?
Relative positioning in CSS allows an element to be positioned relative to its original position in the document flow. This means that even if the element is moved using top, left, right, or bottom, it still occupies its original space in the document.
Syntax
.element {
position: relative;
top: 20px;
left: 30px;
}Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Positioning</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Output
The blue box moves 20px down and 30px right from its original position, but the space it initially occupied remains reserved.
518+ registered 
