Почему не работает overflow в .row (bootstrap4/flex)?

Question

[Егор Огурцов]

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

Если один ряд - нет проблем. Если рядов несколько - нижний ряд перекрывает увеличенную ячейку. Как починить?

Рабочий пример
https://jsfiddle.net/6t9eru1d/10/

Answer 1

[ixon]

Попробуйте явно задать высоту через height, добавьте к блоку свойства:

overflow: hidden;
height: 170px;

https://jsfiddle.net/6t9eru1d/12/
Используйте Masonry.js, если хотите убрать расстояние между блоками верхнего и нижних рядов.

Comments

[Егор Огурцов]

У меня нет проблем с расстоянием. Прочитайте вопрос еще раз.

[ixon]

Егор Огурцов, понял, я подправил ответ, посмотрите.

[Егор Огурцов]

Пробовал, конечно. Проблема в том, что нижний .row перекрывает блок, а мне нужно чтобы блок был сверху нижнего .row

[Егор Огурцов]

ixon, вот, нагляднее. При клике на "подробнее" блок должен изменять высоту, не изменяя высоты строки. Я все перепробовал, он упорно ложится под следующую строку

скриншот

[ixon]

Егор Огурцов, чтобы оно не ложилось на следующую строку, в событие добавляете изменение height на auto, а затем с помощью Masonry.js выравниваете их, чтобы они занимали свободное место.

[Егор Огурцов]

ixon, зачем городить еще и masonry сверху, если причина 100% где-то в css.

[Егор Огурцов]

ixon, разобрался. При установке z-index для row можно сделать нужное перекрытие

[ixon]

Егор Огурцов, как по-вашему, если один из блоков будет открыт, другие как-то должны вниз съехать? На css такое сложно организовать без Masonry. Попробуйте сначала сделать это в статике, а уж потом думайте над динамикой.

[Егор Огурцов]

ixon, нет, все блоки заданной высоты, а открытый должен развернуться и наехать на нижние

[ixon]

Егор Огурцов, тогда изменяйте его z-index на какой-нибудь 99 и убирайте фиксированную высоту.

[Егор Огурцов]

Да, уже разобрался окончательно. Одно только интересно, почему так? Почему z-index блока ничего не меняет, пока не изменишь z-index у row

[Сергей delphinpro]

Егор Огурцов,
То, что вам никто не говорил о z-index
Объясняем Z-index: как позиционировать элементы с ...