Using Absolute Positioning in CSS

Once you start to become more experienced with CSS, one concept that will help you greatly is use of the position property, in particular with a value of absolute.

Some of the benefits of using absolutely positioned elements in your layouts include:

• Aside from a few IE bugs, very good cross-browser support
• Less dependence on floats, which can be problematic
• Less dependence on margins, which can be a bit buggy in older IE

Drawbacks of absolutely positioned elements include:

• The positioned elements are removed from the natural document flow
• Can cause maintenance problems if you have to add other elements near the positioned one

The Basic Syntax

To position an element absolutely, you need to do a few things. Here’s the code, then a basic explanation:

First, some basic HTML:

<div class="box">

	<div class="inner-box">
	<p>dummy content</p>
	</div>

</div>

Now the CSS:

.box {
	position: relative;
}

.inner-box {
	position: absolute;
	top: 20px;
	left: 50px;
}

(In this example, I’ve omitted some values that would otherwise be necessary, like width and/or height.)

First, you need to create what’s referred to as a positioning context. In this case, the positioning context is the .box element. We do this by adding position: relative to that element.

Next, we need to absolutely position the inner element. We do this by setting position: absolute.

Lastly, we tell the browser where exactly we want the inner element to be placed in relation to the outer element. This is done using four possible properties: top, right, bottom, and left. In this example, I’m using two (which is enough). The inner element, by default, starts out in the top left corner of the outer element, then gets positioned 20px down from the top and 50px in from the left.

What Happens if You Don’t Set a Positioning Context?

Absolute positioning doesn’t require a ‘relative’ element (as set on the .box element above). If you absolutely position an element without a positioning context, then the positioning will take place relative to the entire page. (The exception is if you don’t specify any top, bottom, left, or right values. In that case, even if there is no positioning context, the context will automatically become the immediate container element, and the element will still be in flow.)

The lack of positioning context is probably the biggest cause for problems with people new to CSS positioning. A CSS beginner may decide to try setting the position of an element to “absolute”, then after setting top and left values, notice that the element will either get pushed all the way to the left or all the way to the top, or both. And it will be outside of its container element. This might cause a beginner to give up and not ever use that property.

So understanding how the positioned parent affects the absolutely positioned child will help greatly because this is a very useful technique to be familiar with.

Bonus Tip: Sizing Without Width or Height

Here’s a bonus tip that probably not a lot of people know about. You can actually define the dimensions of any absolutely positioned element using the top, left, bottom, and right values alone, without any content in the element and without width or height values.

Here’s an example using the same HTML from above:

.box {
	position: relative;
	width: 400px;
	height: 400px;
}

.inner-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

This will cause the inner element to fill the outer element’s content area. Here’s a JSBin with some exaggerated borders, so you can see how this works:

Conclusion

Don’t be afraid of CSS positioning if you don’t understand it at first, or if you run into problems. It’s a useful technique that, when understood well, will help you avoid a number of problems that can occur from having too many floats or too many margin settings.

You can read more on positioning on SitePoint’s reference.