This diagram illustrates the effects of relative positioning.
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. The text of the "outer" box (at the end of line 1, halfway into line 2, and halfway into line 3) is shifted upward 12px. The text of the "inner" box, thought shifted upward as well, has been relatively positioned so that it lies in its normal flow position at the end of line 2.
In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The lines, as they appear in the image, contain:
Start
1 Beginning of body contents.
2 of outer contents.
Inner contents.
3
End of outer contents.
4 End of body
5 contents.
The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.