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.
