Relative positioning means that the position you specify for an element is relative to its natural position in the document's flow.

An example:

I { position: relative; left: 40px; top: 10px }

Essentially, when you use relative positioning, an element is positioned relative to where it would regularly be. As soon as you stop applying relative positioning, the flow of elements returns to normal, which can cause some overlapping problems, as this example shows.

In addition to positioning things as absolute or relative, you can also use a value of static. This simply means that the element will be positioned normally within the HTML as we're used to, with no special positioning applied to it whatsoever.

So far so good? Then let's look at controlling positioned elements.