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

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно