Блог Тильды

Разбираем функцию Overflow в Zero block

🐾 Overflow позволяет делать видимыми элементы, вынесенные за пределы блока. Например, с помощью настройки можно накладывать элементы на соседние блоки или фиксировать элемент из блока в любом месте на странице. Давайте разбираться, где можно применить возможности Overflow.

Существует три настройки для функции Overflow:

👀 Visible — элементы будут видны за пределами блока.

Представьте, что вы создаёте обложку лендинга в Zero block, а затем используете базовые блоки. Вы хотите, чтобы один элемент выходил за пределы контейнера и накладывался на следующий блок — задайте для этого элемента настройку Overflow: Visible.

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

Ещё один пример: если вы настроили анимацию для элемента, который должен быть зафиксирован при скролле страницы, для него также необходимо добавить настройку Overflow: Visible. Так он станет видимым за пределами блока, в котором расположен.

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

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

Параметр Overflow можно настроить в Zero Block > Settings (tab).

Подробнее о возможностях Нулевого блока читайте 👉 https://tilda.education/articles-zero-block
Made on
Tilda