Описание абсолютного позиционирования с учетом начального объемлющего блока

Эта диаграмма иллюстрирует эффекты абсолютно позиционированного блока с учетом начального объемлющего блока.

Показано окно документа с 8 строками (пронумерованных от 1 до 8), каждая с высотой 24px. Все тело (body) и текст "outer" размещены в строках 1, 2 и 3. Блок "inner" позиционирован в "-100, 200", относительно координат "0, 0" (верхний левый угол окна документа). Большая часть содержания блока "inner", поэтому, визуализируется вне окна документа.

В нижеследующем элементе PRE каждая строка в 24 px имитируется двумя строками, вторая начинается с соответствующего номера. Текст, который находится слева от цифры строк, лежит вне начального объемлющего блока. Строки, которые появляются в изображении:

      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                

Цвет текста по умолчанию – черный. Предложение "Start of outer contents" – красное. Кусок "nts" в "Inner contents" - голубой. Фраза "End of outer contents" – красная.