Relative position is one of the most understood of all the CSS positions. Once you understand how it is supposed to be rendered it can be a powerful design tool for your more complex layouts.

To understand relative positioning first we need to take a look at static positioning. By default elements are positioned statically. Static elements flow normally within the document one after another based on the order of your markup. Here is a visual example of a statically positioned div with the id of “mydiv”.

Here’s the code:

#mydiv {
position:static;
}

Static position will ignore any top, bottom, left or right declarations. Normally you would never need to write a rule like this since static is the default value unless you are trying to override another rule.

Relative position.
Relative position is “relative” to the space the element would normally occupy. The element can be moved in the layout by using top, bottom, left or right.

Here’s the code:

#mydiv {
position:relative;
top: 20px;
left:-75px;
}

This rule tells “mydiv” to move -75 pixels from it’s left position, and 20 pixels from it’s top position.

Notice that the area where the div was positioned statically still maintains it’s space within the layout. Hope that clears things up!