Absolute positioning

With static positioning, which is the default positioning model used on a webpage, everything is laid out in the same order as you define them in your HTML code, from top to bottom, and everything stays within its parent container. With absolute positioning on the other hand, you get to dictate exactly where in the browser window you want an element to appear, even on top of other elements, if that's what you want.

Absolute positioning is accomplished by using the position property and setting the value to absolute. However, this is not enough - you need to use one or several of the position-related properties left, right, top and bottom. This allows you to control the precise position of the element and without any of them, an absolutely position element will revert to a behavior very similar to a static element.

So, let's try adding an element with an absolute position, to see how it acts:

<style type="text/css">
#absolute-div {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #6495ed;
	top: 35px;
	left: 35px;
}
</style>
<div id="absolute-div">
	Absolutely!
</div>
Hello, world!<br>
This is a great example!

Hello, world!<br>

This is a great example!

Try running this example and notice two very important things which likely differs from what you're used to from HTML and CSS: While the text is defined after the box, the box is still rendered over the second sentence, and also, it is allowed to be displayed on top of the text. This is absolute positioning in a nutshell - you can place elements anywhere and even have them overlap other elements.

In this case, we used the left and top properties to offset our element from the top, left corner, but bottom and right can also be used, if we want to specify the distance from the bottom and/or right corner. In addition to that, you can of course combine them like you please, as you can see from this next example:

<style type="text/css">
.box {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #6495ed;
}

.right {
	right: 10px;
}

.left {
	left: 10px;
}

.top {
	top: 10px;
}

.bottom {
	bottom: 10px;
}
</style>

<div class="box top left">Top, Left</div>
<div class="box top right">Top, Right</div>
<div class="box bottom left">Bottom, Left</div>
<div class="box bottom right">Bottom, Right</div>

Here, we define CSS selectors for top, bottom, left and right elements and then we combine them to place elements in all 4 corners of the screen - pretty easy, right?

Overlapping and the z-index property

So, with all this freedom, what happens if two elements overlaps each other? We already saw this happening in the first example of this article but let me make it very clear with another example:

<style type="text/css">
.box {
	position: absolute;
	width: 100px;
	height: 100px;
}
</style>

<div class="box" style="background-color: #5f8426;>Box 1</div>
<div class="box" style="background-color: #6495ed;">Box 2</div>
<div class="box" style="background-color: #68968a;">Box 3</div>

If you try the example, you will only see box number 3. Why? Because they all have the same positions (default values for top and left), so the last declared element takes precedence and is placed on top of the other. This might not be what you want though and as luck would have it, CSS has a property for controlling this: The z-index property.

With the z-index property, we take full control of which elements are on top. It holds a numeric value, which defaults to 0, and the higher z-index value an element has, the more on top it will be, as illustrated by this example:

<style type="text/css">
.box {
	position: absolute;
	width: 80px;
	height: 80px;
	padding: 10px;
}
</style>

<div class="box" style="background-color: #5f8426; top: 10px; left: 10px; z-index: 3;">Box 1</div>
<div class="box" style="background-color: #6495ed; top: 60px; left: 60px; z-index: 1;">Box 2</div>
<div class="box" style="background-color: #68968a; top: 100px; left: 100px; z-index: 2;">Box 3</div>

Notice that by using the z-index property, I can now define the elements in the order I want to and still have them overlap in another order. As a side note, feel free to use more distance between the z-index values, if you want to make room for more elements in between, e.g. 10, 20, 30 and so on.

Absolute, but relatively

Sometimes you may want to position an element absolutely, but instead of have it positioned within the borders of the browser window, you want it to remain within its parent element. The normal behavior, as we have seen, is to use the browser window, but if the parent element has its position property set to relative, all this changes. Now, I could give you an example with a couple of boxes inside of another box, but instead, I decided to show you how far you can get with positioning, by creating a smiley face:

<style type="text/css">
#face {
	position: relative;
	background-color: AntiqueWhite;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	left: 20px;
	top: 20px;
}

.eye {
	position: absolute;
	background-color: #6495ed;
	width: 50px;
	height: 30px;
	top: 40px;
	left: 40px;
	border-radius: 40%;
}

#nose {
	position: absolute;
	background-color: DarkSalmon;
	width: 20px;
	height: 40px;
	top: 85px;
	left: 95px;
}

#mouth {
	position: absolute;
	background-color: DarkSalmon;
	width: 110px;
	height: 8px;
	bottom: 50px;
	right: 45px;
}
</style>

<div id="face">
	<div class="eye"></div>
	<div class="eye" style="left: 120px;"></div>
	<div id="nose"></div>
	<div id="mouth"></div>
</div>

Granted, this guy is NOT pretty, but it's still pretty cool how absolute positioning allows you to almost make a small painting, right? Notice how I establish a frame (the face) by setting its position to relative and then place absolutely positioned elements within this frame - this is a very useful technique!

Summary

Absolute positioning is very powerful, especially when used in combination with a relatively positioned element, but also to place elements, for instance, in the corners of the users browser. If you have overlapping elements then be sure to use the z-index property to control which element gets to be on top.