Relative positioning

By using the position property, you can displace a box from its location in the normal flow. When a box is relatively positioned, following boxes are placed as if the displaced box were in its original position.

For example, consider the following CSS:

img.img01 {
position: relative;
left: 1em;
top: 3em; }

The above style would displace the img with the class of "img01" left one m-space and down three m-spaces from its original location.

When repositioned elements overlap, you can the overlap sequence (which are on top, middle, and bottom) with the z-index property. Elements with higher z-index values will appear on top of elements with lower values.

Relative positioning example

Look at the relative positioning example. By using relative positioning, the relationship of three graphics can be manipulated.

More information