Полное описание примера, иллюстрирующего абсолютное позиционирование
Диаграмма показывает действие абсолютного позиционирования бокса.
Изображено окно документа с 8 строками (пронумерованными от 1 до 8), каждая высотой 24px. Весь текст вне бокса "outer" расположен в строках 1 и 2.
Бокс "outer" позиционирован абсолютно и занимает нижнюю правую четверть окна документа. Весь текст в "outer" и его потомках занимает вторую половину строк с 5 по 8.
В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, имеющими соответствующий номер. Строки, как они выведены в изображении, содержат:
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" - красный.
На диаграмме показан всплывающий бокс.
Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Поскольку бокс "inner" всплыл вправо, весь остальной текст обтекает вокруг него (на строках с 1 по 4).
В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:
1 Beginning of body contents. Start
2 of outer contents. End | Inner
3 of outer contents. End | contents.
4 of body contents.
По умолчанию цвет текста - чёрный. "Start of outer contents" - красный. "Inner contents" - голубой. "End of outer contents" - красный.
