Using Relative Positioning For Consistent Layout

To explain it simply: each block-level element on a web page takes up a chunk of space. That chunk of space receives a default location in the flow of the page at runtime, as it is loaded in order with other elements. By defining the element’s position as relative (through CSS) and modifying the respective properties, you move the element from where it should be located. This will also have an effect on all other relatively positioned elements.

Here’s an example:

<div style="width: 100px; height: 100px; background-color: #CCC; position: relative; top: 15px; left: 15px; ">relativity is great, this is no theory!</div>

So this div (layer) has been moved 15 pixels away from its default top and left position. This means it will move 15 pixels down and 15 pixels to the right. If this moves the element into the default position or space of another element, one of two things will happen:

1. If the other element’s position is absolute or undefined, you will get overlap. This usually isn’t pretty. You may want to achieve this effect sometime with alpha-indexed PNGs, but you’ll still want to control the overlap by defining the relative positioning of each element, instead of leaving it up to the browser’s rendering judgment.
   
   
2. If the other element’s position is also relative, the other element will also move, relative to the position of the first. This is the way we can achieve a very fluid, consistent layout, and the methodology discussed in this article.