Избегайте обрезания элемента, когда он находится внутри элемента «переполнение: скрытый»

Я использую трюк CSS с равными высотами, как показано на этой странице .

Все это работало до сегодняшнего дня, когда мне нужно добавить диалоговое окно внутри одного из столбцов, которое абсолютно позиционируется, чтобы вывести его из streamа. Проблема в том, что, поскольку контейнер имеет «переполнение: скрытый», диалог прерывается, когда он переполняется.

Помимо приведения диалога за пределы элемента контейнера, существует ли какой-либо возможный способ его отображения через CSS?

Вот небольшой пример, демонстрирующий то, что я упомянул.

 .container { overflow: hidden; margin-top: 30px } .col { float: left; padding-bottom: 2000px; margin-bottom: -2000px; border-right: 1px solid black; width: 100px; background-color: grey; } .col.third { border-right: none } #div-a { position: relative } #div-b { position: absolute; background-color: red; width: 35px; height: 350px; bottom: 0; right: 0; margin: 5px; border: 2px solid black; }  

One

Two

Foo

Three

Вы видите, что div#div-b отключается сверху, когда он переполняется в элементе div.container .

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

Лучше всего сделать элемент диалога дочерним элементом контейнера и поместить его таким образом.

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

Один из вариантов заключается в том, чтобы поместить содержимое вашего переполнения: скрытый контейнер в суб-контейнер (возможно, дочерний div). Затем сделайте подконтейнер совпадающим с размерами контейнера и переместите переполнение: скрытое от контейнера до суб-контейнера.

Затем вы можете сделать диалоговое окно дочерним элементом контейнера (дочерним элементом суб-контейнера), и теперь он будет существовать в элементе, который НЕ имеет переполнения: скрытый.

Я не тестировал это, и удаление переполнения: скрытый от контейнера может нарушить ваш дизайн. Если это так, я бы предложил делать то же, что и другие, и полностью перемещать диалоговое окно за пределы контейнера. Это можно сделать даже с помощью Javascript, если у вас нет возможности поместить код диалогового windows в другое место. (Javascript может сделать диалоговое окно дочерним элементом BODY или другим тегом, когда вам это нужно)