position: relative;

The easiest way to explain relative positioning is to imagine that you cut an image out of a printed page and repositioned it somewhere else on the page. Because you cut out the image from the page, there is a hole where it was and the image covers content wherever you glue it.

Placement of an object with a relative position is in relation to its original location in the flow of the page. As an example, that means an image with its position attribute set to relative and its bottom attribute set to 20px appears 20 pixels above the location at which it was originally inserted. If you compare Figure 14.10 and Figure 14.11 (in the next section) you can see the differences in the object’s placement.