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

Для изменения типа позиционирования применяется свойство 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.

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