Позиционирование в CSS

Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

Расположение блоков регулируется:

размерами и типом элемента,
схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
отношениями между элементами в дереве документа,
внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

В CSS блок элемента может располагаться в соответствии с тремя схемами позиционирования:

Нормальный поток
Обтекание
Абсолютное позиционированние

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с display block, list-item или table), строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right.

Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed;.

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.