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

Диаграмма иллюстрирует безусловное позиционирование бокса ("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" - алый.

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