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

Question

[mius_it]

Пытаюсь на uikit реализовать toggle по каждому элементу из блока grid.

По нажатию на элемент должно всплывать вот так:

Но всплывает вот так:

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

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

Comments

[Danny Arty]

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

[Дмитрий]

Один из вариантов, использовать width: 100vw; и центрировать пример

[Сергей delphinpro]

Ну вообще-то, отрицательный марджин вы можете реализовать.
Я так понимаю, блоки построены по сетке.
Значит используя nth-child вполне можно задать марджины
https://jsfiddle.net/DelphinPRO/m5ywe1cf/

[mius_it]

Дмитрий, Центрирует он тоже относительно родительского блока.

[mius_it]

Сергей delphinpro, наверное, да. Только надо будет прописать для всех nth-child в пределах разумного (штук 20) и для всех типовых разрешений. Короче костыль, но возможный.

[mius_it]

Danny Arty, оно у меня на uikit, jsfiddle его не понимает

[Сергей delphinpro]

mius_it, Почему 20? У вас 20 штук в ряд? Очень сомневаюсь, что там будет более 5-6 штук

[Сергей delphinpro]

Да и решается это одной строкой в scss для любого количества

[mius_it]

Сергей delphinpro, там родительский блок на uikit (аналог bootstrap), задающий расположение дочерних блоков на разных разрешениях, а дальше блоки подряд.
Примерно так:

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-5@m uk-grid-match uk-grid">
   <div>...</div>
   <div>...</div>
   ...
   <div>...</div>
</div>

Одна и та же конструкция на десктопе выводит 5 блоков в ряд, на планшете 3, а на телефоне 2. Короче, если повозиться с описанием отступов для разных размеров экрана, то все получится.

[Сергей delphinpro]

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

[mobi]

Как вариант, задать position:relative для внешнего контейнера (.uk-grid, как я понимаю) и убедиться, что он не задан у самих блоков, а потом всплывающий текст позиционировать через position:absolute;left:0;right:0 (без указания top/bottom).

[mius_it]

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