141. Позиционирование элементов свойством position

Введение

Для верстки веб-страниц часто используется свойство position, которое позволяет позиционировать элементы относительно окна браузера. Свойство position предоставляет возможность изменить положение элемента, относительно места, в котором он находится по умолчанию. Все элементы располагаются последовательно один за другим, в такой последовательности, в какой они определены в веб-документе. Рассмотрим синтаксис свойства position:

Код CSS

position: static | absolute | fixed | relative;

Теперь рассмотрим каждое значение подробнее.

Значение static

static – значение по умолчанию. Элементы расположены один за другим, в том порядке, в котором они определены в HTML-документе. Применение свойств top, bottom, left, right не влияет на положение элемента.

Значение absolute

absolute – элемент позиционируется относительно блока, в котором он находится (блока-контейнера) или окна браузера. Для других элементов, которые находятся в том же блоке-контейнере, он словно не существует.

Если установлено значение absolute, то на элемент влияют свойства top, bottom, left, right.

Применяя это значение, необходимо обращать внимание на его родителя (блок-контейнер). Если значение свойства position установлено как static у блока-контейнера или этого блока нет, то отсчет координат начинается от окна браузера. Если значение свойства position установлено как relative, то отсчет координат начинается от края родительского элемента.

Значение fixed

fixed – похоже на значение absolute. Отличием является то, что элемент всегда позиционируется относительно окна браузера и на его положение не влияет блок-контейнер. Помимо этого элемент фиксируется, т.е. при прокрутке страницы он не изменяет своего положения относительно окна браузера.

Значение relative

relative – относительное позиционирование. Позволяет изменить положение, относительно границ блока-контейнера. При этом элемент не удаляется из структуры HTML-документа и изменение его положения может повлечь за собой перекрытие содержимого на странице.