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

Question

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

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

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

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

<style>
.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;
}
</style>

<div class="container">
    <div class="col first">
        <p style="height: 100px">One</p>
    </div>
    <div class="col second">
        <p style="height: 300px">Two</p>
        <div id="div-a">
            <!-- this gets cut off by the "overflow: hidden" on div.container -->
            <div id="div-b">
                Foo
            </div>
        </div>
    </div>
    <div class="col third">
        <p style="height: 200px">Three</p>
    </div>
</div>

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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