CSS Positioning: Tips and Tricks With Relative and Absolute Positioning

It pretty easy to understand the idea of positioning the HTML elements with CSS. There are 4 types of positioning; Static Positioning, Fixed Positioning, Relative Positioning and Absolute Positioning. The main idea of this post is not to explain the four ways of positioning HTML elements. The positioning methods can be combined to achieve styles that are otherwise difficult to achieve. Often a web developer has the control on both the HTML elements and the CSS but at times we have to accept the existing HTML structure and style it to specific needs. Its in this situation the combination of positioning techniques are useful. First I will give a brief overview of all the four methods of positioning.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. top, bottom, left, and right CSS have no effect on statically positioned elements.

Fixed Positioning

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements are removed from the normal flow.
Fixed positioned elements can overlap other elements.

/* Example */
.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

NB: As always,Internet Explorer gives us some trouble. IE supports the fixed value only if a !DOCTYPE is specified.

Relative Positioning

A relative positioned element is positioned relative to its normal position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. That is, they can only be moved horizontally. Relatively positioned element are often used as container blocks for absolutely positioned elements. This is what I plan to explain in depth. Just hang on.

/* Example */
.pos_left
{
    position:relative;
    left:-20px;
}
.pos_right
{
    position:relative;
    left:20px;
}

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is . Absolutely positioned elements can overlap other elements depending on the z-index value.

/* Example */
h2
{
    position:absolute;
    left:100px;
    top:150px;
}

Combining Relative Positioning and Absolute Positioning

As said above, relatively positioned element are often used as container blocks for absolutely positioned elements. Its easier to manage the CSS style when the measurements are relative to the parent container and adjacent elements. Using the absolute position by itself gives a lot of trouble as we have to specify the position of the elements with respect to the html or body element. On the other hand using relative position alone doesn’t provide us much flexibility as it can only be adjusted in the horizontal (left & right) direction.

By combining Relative and absolute positioning we can override the static positioning style. With this we can specify the relative position of an element with respect to its parent element. All properties such as top, left, right, bottom, margin, padding, border can me specified and behaves as expected.

This is how we use the technique. The parent element to which a child element is to be relatively positioned must have its positioning style set as relatively (eg: <div style="position:relative">). Omitting the top, left or other positioning tags will leave this parent element in the normal static position even if the position style is changed to relative. Now in the child element set the position type to absolute and specify the relative position of the element with respect to its parent (eg: <img style="position:absolute; top:5px; left:10px;" src="…" height="20" width="20">). If multiple parents are positioned as relative then the child positioned as absolute will use the closest parent (hierarchically) as the reference.

<div style="position:relative; height:100px; background:#EFEFEF;">
<div style="position:absolute; top:10px; left:10px; width:100px; background:#FFCC00;">This is the top left floating div</div>
<div style="position:absolute; top:10px; right:10px; width:100px; background:#FFCC00;">This is the top righ floating div</div>
</div>

One problem of using the technique is that the parent element doesn’t expand with the the child element. Child element floats above the parent.

The following are some of the ways this trick is utilized.

Rounded Corner Elements in HTML Using CSS And Images With Variable Width and Height
How To Adjust Textarea Label Position Without Table
More to come…..