Свойства позиционирования

Для изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идёт в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.

  • left — задаёт координаты левого края элемента от левого края родителя или левого края исходного положения элемента.
  • right — задаёт координаты правого края элемента от правого края родителя или правого края исходного положения элемента.
  • top — задаёт координаты верхнего края элемента от верхнего края родителя или верхнего края исходного положения элемента.
  • bottom — задаёт координаты нижнего края элемента от нижнего края родителя или нижнего края исходного положения элемента.

Заметьте, что напрямую нельзя задать положение правого края элемента от левого края родителя и наоборот. Также нельзя задать положение верхнего края элемента от нижнего края родителя и наоборот.

У position есть пять значений.

  • static — нормальное или статичное позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static — это значение по умолчанию для position.
  • relative — относительное позиционирование. Изменяет положение элемента от его исходного расположения.
  • absolute — абсолютное позиционирование. Элемент при этом не существует в потоке документа и его положение задаётся относительно краёв браузера.
  • fixed — фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
  • sticky — липкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.

Для изменения положения элементов по оси Z применяется свойство z-index, которое непосредственно связано со свойством position. z-index работает только для элементов, у которых position задано как relative, absolute или fixed.

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 26.07.2017