Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Введение
Для верстки веб-страниц часто используется свойство position, которое позволяет позиционировать элементы относительно окна браузера. Свойство position предоставляет возможность изменить положение элемента, относительно места, в котором он находится по умолчанию. Все элементы располагаются последовательно один за другим, в такой последовательности, в какой они определены в веб-документе. Рассмотрим синтаксис свойства position:
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 по тегу CSS.
