Позиционирование элементов

Типы позиционирования

Кроме параметров Настройки Отображения (Display) и Авто-расположение (Auto Layout) для установки положения элементов на странице также используются настройки Позиционирования (Position).

Эти настройки дают возможность управлять расположением элемента на странице по отношению к его исходному положению, родительскому элементу или окну браузера.

С помощью позиционирования можно менять поток элементов на странице, сдвигая элементы или фиксируя их позицию.

Для настройки параметров нужно:

• задать тип позиционирования,

указать значения атрибутов позиционирования сверху top, слева left, снизу bottom или справа right, определяющие смещение элемента.

Существуют следующие типы позиционирования:

Статическое позиционирование (Static)

Стандартная позиция элемента, без смещения. Элемент с таким позиционированием находится в общем потоке страницы и отображается в том порядке, в котором расположен на вкладке Cлоев.

Атрибуты позиционирования (сверху, слева, снизу или справа) для таких элементов не работают.

Статическая позиция используется для элементов, у которых важна стабильная структура и корректная работа авто-расположения.

Примеры элементов со статическим позиционированием: форма, поля ввода, текст внутри кнопки.

Относительное позиционирование (Relative)

Элемент позиционируется относительно своего исходного положения. Он остается в потоке, но может быть смещен относительно своего исходного положения с помощью атрибутов позиционирования.

• Без атрибутов позиционирования (сверху, слева, снизу или справа) — элемент будет позиционирован точно так же, как статичный.
• Если задать значения сверху, слева, снизу или справа —  элемент сдвинется от исходного положения на указанные значения.

При этом другие элементы не будут подстраиваться под отступ, оставленный элементом. Относительно позиционированный элемент может перекрывать другие элементы, не влияя на их положение.

Относительное позиционирование используется для элементов, с которыми дизайнеру может понадобиться работать гибко — сдвигать, накладывать на другие блоки, создавать декоративные композиции.

Примеры элементов с относительным позиционированием: текстовый блок, кнопка, контейнер, div-блок обертка для абсолютно позиционированных элементов.

Пример относительного позиционирования: сдвиг элемента с наложением его на другой элемент.

Абсолютное позиционирование (Absolute)

Элемент позиционируется относительно родительского элемента, у которого задано нестатическое позиционирование.

Абсолютное позиционирование используется, чтобы удалить элемент из обычного потока элементов. Абсолютно позиционированный элемент не зависит от других элементов и не влияет на их положение.

Для установки расположения элемента используйте атрибуты позиционирования сверху, слева, снизу или справа — эти значения будут относиться к ближайшему по иерархии родительскому элементу с позиционированием, отличным от статического.

Примеры использования абсолютного позиционирования:

• Закрепление положения дочернего элемента в определенном месте родительского элемента — декоративный элемент или бейдж в углу карточки, кастомный тултип.
• Кнопка закрытия в углу всплывающего окна.

Фиксированное позиционирование (Fixed)

Фиксация позиции элемента, которая не будет меняться при прокрутке страницы. Фиксированные элементы позиционируются относительно окна браузера.

Для фиксации элемента нужно указать атрибуты позиционирования (сверху, слева, снизу или справа).

При прокрутке страницы эти элементы остаются фиксированными на своих позициях.

Примеры использования фиксированного позиционирования:

• Фиксированная шапка сайта или меню, которое остается видимым при прокрутке страницы.
• Нижняя панель действий на мобильных телефонах.
• Всплывающее окно.
• Кнопка Наверх в нижнем углу страницы.

Липкое позиционирование (Sticky)

В зависимости от положения прокрутки окна браузера элемент будет позиционирован фиксированно или относительно.

Липкий элемент располагается в потоке элементов до тех пор, пока не будет достигнуто определенное положение прокрутки. В этот момент он переключается на поведение фиксированного элемента внутри своего родителя. Как только липкий элемент коснется нижней части своего родителя, он прекратит прокрутку.

Для липкого позиционирования нужно обязательно указать по крайней мере одно значение положения (сверху, слева, снизу или справа). Фиксация положения может работать некорректно, если какой-либо родительский элемент имеет заданную высоту или переполнение (Overflow), отличное от Видимый (Visible).

Примеры использования фиксированного позиционирования: создание эффектов пролистывания — закрепленный заголовок раздела, «прилипшая» первая строка в таблице, липкие фильтры на мобильных телефонах.

Атрибуты позиционирования top, left, bottom и right

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

Пример:

• значения top: 0, left: 0 — элемент будет позиционироваться в левом верхнем углу
• значения bottom: 0, right: 0 — элемент будет позиционироваться в правом нижнем углу

При указании всех четырех значений равных 0 — элемент растягивается на всю ширину и высоту родительского элемента.

Z-индекс (Z-index)

В настройках Позиционирования также можно установить Z-индекс, определяющий положение элемента на воображаемой оси Z, проходящей внутрь и за пределы экрана вашего компьютера.

По умолчанию элементы имеют автоматический Z-индекс — элементы в нижней части страницы располагаются над элементами, расположенными на странице выше их, а элементы справа располагаются над элементами слева. Статические элементы всегда находятся ниже, чем элементы с другими типами позиционирования.

Одни элементы могут перекрывать другие элементы в естественном потоке. Чтобы изменить порядок наложения элемента по умолчанию, можно изменить у него значение Z-индекса.

Значения Z-индекса

Элементы с более высоким значением отображаются поверх элементов с более низким.

Вы можете выбрать значение Z-индекса из выпадающего списка: от -1 до 100.

При отрицательном значении можно потерять видимость элемента, так как он будет отображаться под большинством других элементов.

Z-индекс для вложенных элементов

Когда для Z-индекса задано значение auto, порядок наложения элемента равен порядку наложения его родительского элемента. Например, дочерний элемент никогда не может быть выше родительского элемента, независимо от того, насколько велико значение его z-индекса.