Описание примера позиционирования с учетом позиционированного предка

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

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

В нижеследующем элементе PRE каждая строка в 24 px имитируется двумя строками, вторая начинается с соответствующего номера. Справочные края для позиционирования блока "inner" указаны в диаграмме толстыми штриховыми линиями. Левые верхние координаты блока "inner" помечены значением (+200, -100). В элементе PRE внизу справочные края для "inner" указаны вертикальными черточками и знаками равно. Смещение блока "inner" показано в квадратных скобках. Строки, которые появляются в изображении:

(24)                        ====
(29)                             |
1 Beginning of body contents.|Start

2 of outer contents. End of outer

3 contents. End of body contents.

4(10)          [(+200, -100)]

5(16)                Inner

6(16)                contents.

7(16)                

8(16)                

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