Long description illustrating absolute positioning with respect to the initial containing block

This diagram illustrates the effects of absolutely positioning a box with respect to the initial containing block.

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 at "-100, 200" relative to the "0, 0" coordinates (the upper left corner of the document window). Most of the "inner" box contents are therefore rendered outside the document window.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The text that is to the left of the line numbers lies outside the initial containing block. The lines, 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

Inner 5

Conte 6 nts

      7                

      8                

The default text color is black. "Start of outer contents" is red. The "nts" in "Inner contents" is blue. "End of outer contents" is red.

Return to image.