Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

Похожие уроки и записи блога

Свойство background для работы с фономЦвета и фон
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Свойство z-index для определения уровня элементаПозиционирование
Первое знакомство с PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Управляющие последовательности в JavaScriptТипы и переменные
Типы данных в PythonЗнакомство с Python
Добавляем градиент к фону элементаЦвета и фон
Основы функций в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно