Позиционирование

Сайты
Квизы
Тарифы
Академия
Помощь

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

Позиционирование необходимо при работе со свободной секцией. С его помощью можно фиксировать положение элементов на экране.

Это нужно, чтобы секция одинаково выглядела на разных устройствах. Гаджеты отличаются размерами экранов: ваш сайт будут смотреть и с 6-дюймового смартфона и с 32- дюймового монитора.

Нужно настроить секцию так, чтобы на разных устройствах элементы оставались на «своих» местах — то есть местах с заданными координатами.

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

Точки привязки

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

Для определения точек привязки нет особых правил, ориентируйтесь исключительно на ваш дизайн.

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

При такой привязке кнопка и заголовок остаются «в связке» на разных размерах экрана.

Теперь мы привяжем кнопку к центру, а заголовок оставим привязанным к правой нижней точке.

В этом случае в режиме просмотра на экране 13 дюймов кнопка залезает на заголовок. А на экране 27 дюймов сильно смещается вверх.

Когда вы позиционируете элементы, обращайте внимание не только на точки привязки, но и на координаты.

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

Система координат

В свободной секции есть система координат, где ось X — ширина, а ось Y — высота. У каждого элемента заданы координаты.

Координаты задаются в зависимости от точки привязки. Допустим, элемент в центральной точке привязки имеет координаты 0/0. Если элемент остается на том же месте, но точка привязки меняется, то координаты тоже меняются.

Вы можете вручную задавать координаты для элементов. Например, если хотите выровнять элемент ровно по центру, то можно не передвигать элемент, а задать в осях X и Y значения «0».

Типы привязок

Ручная привязка. Вы сами выбираете к какой точке привязать элемент.

Автоматическая привязка. Алгоритм определяет точку привязки за вас. Как правило, это ближайшая точка к элементу.

Область позиционирования

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

Сетка — это контейнер с минимально заданной шириной 1150 пикселей и неограниченной высотой.

Ширина экрана может меняться, ширина сетки всегда остается 1150 пикселей.

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

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