This diagram illustrates the effects of absolutely positioning a box ("inner") with respect to a containing block established by a relatively positioned ancestor ("outer").
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and "outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been positioned relative to the top and left edges of the "outer" element's first inline box.
In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The reference edges for positioning the "inner" box are indicated in the diagram by thick dashed lines. The upper left coordinates of the "inner" box are labeled by (+200, -100). In the PRE element below, the reference edges for "inner" are indicated by vertical bars and equal signs. The offset of the "inner" box is given in square brackets. The lines of text, as they appear in the image, contain approximately:
====
|
1 Beginning of body contents.|Start
2 of outer contents. End of outer
3 contents. End of body contents.
4 [(+200, -100)]
5 Inner
6 contents.
7
8
The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.