CSS Absolutely Relative Positioning

When web designers code a site’s HTML and CSS, the built-in methods for positioning elements on the screen are “absolute”, “fixed” and “relative” positioning. Each method provides its distinct set of advantages and drawbacks, however there are times when a layout requires the best of all worlds. In order to handle these cases, a very useful hybrid technique is available, dubbed absolutely relative positioning.

First, an overview of the basic positioning techniques. Absolute positioning allows the designer to move an image or block of text to a specific coordinate on the page. For instance, if the designer wants an image to appear in the top-left corner, they could use the following style:

position:absolute;
top:0px;
left:0px;

Similar to absolute positioning, there is another version called fixed positioning, that positions the element at a coordinate relative to the user’s screen. This is most apparent when the user scrolls. Absolutely positioned elements scroll with the page, while fixed elements stay “pinned” to the browser window, no matter where the user scrolls.

In contrast to absolute positioning, relative positioning displays an element within the flow of the document. In essence, relative positioning is similar to using Microsoft Word. When a user types a paragraph, they can then insert an image, and then type another paragraph of text. With relative positioning, if they add additional text to the beginning, the image and following paragraph will move down. In contrast, with absolute positioning, the image and following paragraphs would stay fixed, and overflow onto each other.

Relative positioning is generally used for most of a website’s content, while absolute positioning is used for graphics that need to be overlaid on each other. However, there are times when a designer will want to create a complex graphic that still flows with the page.

The solution to this is “absolutely relative” positioning. To use this technique, the designer will need to create an outer DIV element with relative positioning, and then create an absolute element inside:

<div style="position:relative;">
<div style="position:absolute;top:0px;left:0px;">Is this absolutely relative, or relatively absolute?</div>
</div>

In this example, the absolutely positioned item will flow with the rest of the surrounding content.

There is one final caveat which is often a useful aid to this technique. While the relative DIV will flow with the rest of the page, it will have no idea of the size of its content. As a result, this may cause overlap with content directly following the DIV. The solution is to add a “clear” DIV after the relative DIV, to automatically give elements the proper height:

<div style="position:relative;">
<div style="position:absolute;top:0px;left:0px;">Is this absolutely relative, or relatively absolute?</div>
</div>
<div style="clear:both;"></div>

Using these techniques will help keep the CSS and HTML simple and elegant, while allowing for complex page styles and effects. With its relative ease of use and cross-browser compatibility, this method is one of the more powerful advanced CSS techniques.

Written by Andrew Palczewski

About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+