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

Цикл статей «CSS учебник».

Следующая статья — «CSS выравнивание».
Предыдущая статья — «CSS отображение и скрытие, блочные и строчные элементы».

За размещение элементов на странице отвечают шесть свойств: position, left, top, right, bottom и z-index.

Свойство position указывает тип позиционирования.

Существует четыре типа позиционирования:

статическое позиционирование
относительное позиционирование
фиксированное позиционирование
абсолютное позиционирование

Статическое позиционирование

Статическое позиционирование задаётся установкой position:static. При этом элементы остаются на тех местах страницы, где они были объявлены. Свойства left, top, bottom, right не работают со статическим позиционированием. Все элементы по умолчанию размещаются этим способом.

Относительное позиционирование

Задаётся при помощи position:relative. При относительном позиционировании элементы размещаются относительно своего обычного место. Указание left, top, bottom, right сдвигает элемент относительно исходной позиции, при этом место для элемента всегда резервируется в том месте, где он был бы расположен при статическом позиционировании. Остальные элементы располагаются так, словно элемент расположен на обычном месте.

Фиксированное положение

Задаётся при помощи position:fixed. Позиция элемента задаётся при помощи left, top, bottom, right относительно экрана и не меняется при прокрутке страницы. Часто используется для всплывающих pop-up баннеров.

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

Задаётся при помощи position:absolute. Элемент позиционируется абсолютно. Его расположение задаётся с помощью left, top, right, bottom. На положение также влияет значение свойства position родительского элемента. Если оно равно static или родителя нет, то отсчёт ведётся от края браузера. Если значение position родителя равно fixed, relative или absolute, то позиция отсчитывается относительно родительского элемента.

Свойство z-index

С помощью свойства z-index можно указать порядок отображения элементов при наложении их друг на друга. Элемент, у которого стоит большее значение в z-index будет отображён поверх элемента с меньшим значением z-index.