🐾 Overflow позволяет делать видимыми элементы, вынесенные за пределы блока. Например, с помощью настройки можно накладывать элементы на соседние блоки или фиксировать элемент из блока в любом месте на странице. Давайте разбираться, где можно применить возможности Overflow.
Существует три настройки для функции Overflow:
👀 Visible — элементы будут видны за пределами блока.
Представьте, что вы создаёте обложку лендинга в Zero block, а затем используете базовые блоки. Вы хотите, чтобы один элемент выходил за пределы контейнера и накладывался на следующий блок — задайте для этого элемента настройку Overflow: Visible.
Чтобы было удобнее контролировать расположение элементов за пределами Zero block, откройте в соседней вкладке браузера предпросмотр страницы и обновляйте его по мере внесения правок. Так одновременно с созданием дизайна можно проверять отображение элемента на соседних блоках, в том числе, в мобильной версии.
Ещё один пример: если вы настроили анимацию для элемента, который должен быть зафиксирован при скролле страницы, для него также необходимо добавить настройку Overflow: Visible. Так он станет видимым за пределами блока, в котором расположен.
🙌 Auto — настройка позволит растянуть артборд в зависимости от контента блока. Если элементы будут выходить за пределы контейнера, появится возможность скролла. Параметр можно использовать в том числе для горизонтального скролла — например, для меню с горизонтальным скроллом для мобильной версии сайта или для горизонтальной анимации на странице.
🕶 Hidden — вариант по умолчанию. Он означает, что элементы, выходящие за границы контейнера, будут скрываться.
Параметр Overflow можно настроить в Zero Block > Settings (tab).