Описание примера абсолютного позиционирования

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

Показано окно документа с 8 строками (пронумерованных от 1 до 8), каждая высотой 24px. Весь текст вне блока "outer" расположен в строках 1 и 2.

Блок "outer" позиционируется абсолютно таким образом, что он занимает нижний правый прямоугольник окна документа. Весь текст в блоке "outer" и его потомки занимают вторую половину строк с 5 по 8.

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

1 Beginning of body contents. End of 

2 body contents.

3

4

5                Start of outer

6                contents. Inner

7                contents. End of

8                outer contents.

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