Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Позиционирование элементов свойством 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-документа и изменение его положения может повлечь за собой перекрытие содержимого на странице.

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.