Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка

Полное описание примера, иллюстрирующего позиционирование относительно позиционированного предка

Диаграмма иллюстрирует абсолютное позиционирование бокса ("inner") относительно содержащего блока, установленного относительно позиционированным предком ("outer").

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

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

                        ====
                             |
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                

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.

Вернуться к изображению.