Relative positioning

A relatively positioned element will, as the name indicate, be positioned relative to its parent element. The parent is the element containing the child element, which can of course be a specifically defined element or the entire page (in this case, the body tag is likely the parent). By default, if you set the position property to relative, the element will act as if it were static:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 100px;
	height: 100px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

However, the real magic starts happening when you use the position related properties called top, bottom, left and right. By default, these are set to auto, which basically results in the element being placed in the top, left corner. You can easily change this though:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 100px;
	height: 100px;
	top: 50px;
	left: 50px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Notice how the child element has now been pushed 50 pixels from the top and the left. For relatively positioned elements, the top andleft properties tells the browser how far below the normal position you want it, while the bottom and right properties tells the browser how far above the normal position you want the element. This might be a bit confusing at first, especially because the properties work in a more logical way when it comes to absolutely positioned elements, but you will soon get the hang of it.

This also means that while you CAN use negative left and top values to move an element away from its parent, it has the same effect as giving the element the same bottom and right values, but in this case, positive numbers instead of negative. To illustrate, check out the next two examples where I use both approaches and achieve the exact same result:

Using negative values for the left and top properties:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
	padding: 10px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	left: -20px;
	top: -20px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Using the bottom and right properties instead:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
	padding: 10px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	bottom: 20px;
	right: 20px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

So as you can see, which method to use is really up to you!

How does relative positioning affect surrounding elements?

That's an excellent question but the answer is also quite simple: It doesn't. When a browser meets a relatively positioned element, it will simply push it in the direction you instruct it to (by using top/left or bottom/right properties), but it will still just allocate the space that the element was originally meant to take up. This becomes very clear with the next example:

<style type="text/css">
.box {
	background-color: #6c9;
	padding: 20px 10px;
	width: 200px;
}
#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	left: -10px;
	top: 20px;
}
</style>

<div class="box">Top</div>
<div id="relative-div">
	Relative element
</div>
<div class="box">Bottom</div>

We now have surrounding elements, which uses static positioning (since this is default) and in the middle, an element with a relative position. We use the left and top property to push it away from the top element, and look what happens: The element is pushed away from the top element, as expected, but the bottom element is not pushed away, which means that the two elements will overlap each other. Why? Because the relatively positioned element is still only claiming the space it would have if it was statically positioned!

Summary

As you can see, relative positioning have some advantages as well as some disadvantages. However, in combination with absolute positioning, it can be even more useful, as we will see in the next chapter.