Как работает позиционирование элементов в Taptop (Static, Relative, Fixed, Absolute, Sticky)

Позиционирование отвечает на простой вопрос: относительно чего элемент располагается на странице и как он ведет себя при изменении контента и прокрутке. Разберемся, как это работает в Taptop.

Зачем нужно позиционирование элементов

Основная идея: элемент никогда не существует отдельно, он всегда встроен в структуру страницы. Любой элемент всегда находится внутри другого элемента, и именно эта связка «элемент → родитель» определяет его поведение.​

Позиционирование задает, будет ли элемент идти в общем потоке, смещаться внутри своего родителя, выпадать из потока или фиксироваться при прокрутке.​

Как настроить позиционирование элемента

Выберите элемент на холсте или в слоях.

На вкладке Дизайн правой панели задайте тип позиционирования, который дает нужное поведение элемента: 

Статическое

Относительное

Абсолютное

Липкое 

Фиксированное

При необходимости задайте смещение элемента сверху / снизу/ слева / справа (кроме статического позиционирования) и Z-index.

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

Static — самый базовый и безопасный режим. Элементы просто идут друг за другом в потоке в том порядке, в котором расположены на вкладке Cлоев: текст, картинка, кнопка, форма.​

Элемент располагается по правилам, заданным в авто-лейауте (Auto layout).​

Свойства позиционирования сверху / снизу/ слева / справа для Static не применяются.​

Когда использовать статическое позиционирование

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

Формы

Поля ввода

Текстовые элементы​

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

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

Место под элемент все равно сохраняется, структура не меняется.

Элемент может перекрывать другие элементы, не влияя на их положение.

Когда использовать относительное позиционирование

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

Мелкие декоративные смещения элементов

Наложение картинок друг на друга или текстового блока на картинку

Как настроить относительное позиционирование элемента (Relative) в Taptop

При выборе относительного позиционирования доступна настройка смещения элемента:

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

Если задать смещение сверху / снизу/ слева / справа — элемент сдвинется от исходного положения на указанные значения.

Как настроить Z-index

Если элементы накладываются друг на друга, Z-index определяет, какой из них будет сверху. 

Это полезно, когда вы работаете с перекрывающимися карточками, плашками или баннерами.

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

Absolute вынимает элемент из общего потока: он больше не влияет на другие элементы и не занимает место в структуре. Вместо этого он привязывается к конкретной точке внутри родителя.​

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

Если такого родителя нет, его расположение будет считаться относительно всей страницы.​

Когда использовать абсолютное позиционирование

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

Кнопки поверх изображений

Иконки внутри карточек

Бейджи

Тултипы

Любые элементы, которые должны находиться в конкретной точке блока

Как настроить абсолютное позиционирование элемента (Absolute) в Taptop

Задайте нестатическое позиционирование блоку-контейнеру (например, Relative).

Внутри блока разместите элемент и задайте ему позиционирование Absolute.

Задайте элементу значения смещения сверху / снизу/ слева / справа, а также при необходимости Z-index.

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

Fixed привязывает элемент не к странице и не к контейнеру, а к окну браузера. Такой элемент остается на месте независимо от прокрутки.​

Когда использовать фиксированное позиционирование

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

Плавающие кнопки

Кнопки виджетов чатов

Фиксированные хедеры или панелей действий

Всплывающие окна

Как настроить фиксированное позиционирование (Fixed) в Taptop

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

При необходимости задайте Z-index.

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

Sticky — это особый режим, сочетающий относительное и фиксированное позиционирование. 

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

Особенности липкого позиционирования:

Sticky всегда зависит от своего контейнера: он не может прилипнуть навсегда — только в пределах своего блока.​

Элементу обязательно нужно указать сторону (сверху / снизу/ слева / справа), к которой он будет прилипать.​

Контейнер должен давать достаточно пространства для движения по высоте, иначе элемент просто не успеет перейти в липкий режим.​

Когда использовать липкое позиционирование

Sticky помогает сделать интерфейс удобнее, особенно на длинных страницах и блоках.​

Боковые колонки с навигацией, которые остаются рядом с контентом при прокрутке.

Внутренняя навигация по разделам лендинга или статьи.

Блоки фильтров и настроек, которые должны быть под рукой, пока пользователь листает страницу.

Прокрутка фонового изображения без прокрутки контента.

Как настроить липкое позиционирование (Sticky) в Taptop

Выберите сторону, к которой элемент будет прилипать.​
Обычно используется сверху (top) для фиксации у верхнего края.

Задайте значение отступа — оно определит, когда сработает фиксация.
Например:

Если значение отступа не указать, элемент будет вести себя как обычный Relative — визуально Sticky не сработает.​