CSS Position Relative

position: relative; positions an element relative to its original place in the document flow. 

The original place of the element in the document flow will stay reserved even after the element has been positioned.

If you don't position: relative; an element properly, it might overlap some element/ elements that are next to it or any element on the page based on where the new position of the element is. That means, when you position: relative an element, it's important to make sure that the new position is not reserved by the browser for any other elements in the document flow.

In the case of position: relative;, you could say that the element is and is not in the document flow anymore. It is, in that, the original place of the element is reserved by the browser and won't be occupied by any other elements in the normal document flow. And it's not, in that the browser is not responsible for the new position of the element anymore. You, as the developer, should make sure that the element is not going to overlap any elements on the page that are in the normal document flow. 

Let's do the following example. In this example, there are three normal div's in an HTML page and position relative has been implemented on Box1.  

<DOCTYPE html>
<html>

<head>
<style>
body {
	background-color: #8c8c8c; 
} 

div {
	background-color: red; 
	color: black; 
	height: 100px;
	padding: 20px; 
	margin: 20px;
	border: 3px solid black;
	border-radius: 5px; 
}
</style>
</head>

<body>
<h1>Position Relative</h1>
<p>position: relative; positions an element based on its original position in the normal document flow. Take a look at the following example:</p>
<div id="position-relative">Box1</div>
<div>Box2</div>
<div>Box3</div>
</body>

</html>

Here's an screen shot of the code in Firefox:

position Relative Stage One Snapshot
position: relative; Stage One Snapshot

Next, we're going to implement position: relative; on Box1 and see what happens: 

<DOCTYPE html>
<html>

<head>
<style>
body {
	background-color: #8c8c8c; 
} 

div {
	background-color: red; 
	color: black; 
	height: 100px;
	padding: 20px; 
	margin: 20px;
	border: 3px solid black;
	border-radius: 5px; 
}
#position-relative {
	position: relative; 
	top: 50px; 
	right: 50px; 
}
</style>
</head>

<body>
<h1>Position Relative</h1>
<p>position: relative; positions an element based on its original position in the normal document flow. Take a look at the following example:</p>
<div id="position-relative">Box1</div>
<div>Box2</div>
<div>Box3</div>
</body>

</html>

Here's what happens as a result of the position: relative; implemented: 

position: relative; implemented
position: relative; implemented

Okay, here's what happens, as we implemented position: relative; on Box1: 

  • Box1 was 50px moved to the left and 50px to the bottom. 
  • The original place of Box1, as you can see, is still reserved in the document flow, otherwise Box2 and as result Box3 would have jumped up to fill the gap. 
  • Box1 doesn't see the document flow anymore and is blocking some part of Box2. 
  • Some part of Box1 has been even moved out of the viewport. 
  • Box one has been moved according to a coordinate system based on its own original position in the document flow. 

Understanding position: relative; is important because it builds the basis for CSS layouts. You understand this and other CSS position property values, namely, absolute, fixed, etc., you'll be able to understand CSS layouts well which are very important for any web developer.