Перекрытие двух div и «очистка» их родительского div

Question

Мой CSS-фу подводит меня сюда: То, что я хотел бы сделать, это поместить два дочерних элемента div (с variable heights), чтобы они перекрывались.

Использование: position: absolute; top: 0px; left: 0px; - единственный способ, которым я знаю, с родителем, установленным на position: relative.

Проблема в том, что дочерние элементы div извлекаются из макета в соответствии со спецификацией CSS, уменьшая родительский элемент div до высоты: 0px, так что я не могу очистить этот элемент div и поместить любое содержимое ниже.

В моем удивительном искусстве ASCII ниже подробно описано, что я собираюсь сделать ... есть идеи?

Кроме того, мне нужно, чтобы эти div-ы точно перекрывались для плавного затухания jQuery и, возможно, опробовали некоторые из новых преобразований Webkit, например, демонстрацию cardflip от Apple: https://developer.apple.com/library/archive/samplecode/CardFlip/Introduction/Intro.html

Если есть другой способ перекрыть их точно в CSS, и / или если есть другой способ получить действие, подобное карточному флипу (с использованием jQuery или Webkit / CSS) с двумя дочерними элементами div с переменной высотой, я весь в ушах!

|-------------------------------------------------|
|  Parent div                                     |
|  |-------------------------------------------|  |
|  |                                           |  |
|  |          DIVS 1 & 2 (overlapped)          |  |
|  |                                           |  |
|  |-------------------------------------------|  |
|-------------------------------------------------|

...more content below, after clearing the parent...

Answer 1

Как насчет установки одного из них на postition:absolute?Таким образом, один дочерний div все равно будет давать высоту родительскому div, но другой будет исключен из потока.

.parent { position: relative; }
.child1 { position: absolute; top:0; left:0; }
.child2 { position: relative; }

Просто предложение jQuery:

var height1 = $(".child1").height();
var height2 = $(".child2").height();
if(height1 > height2)
    $(".child2").height(height1);
else
    $(".child1").height(height2);

А теперьмежду двумя <div> х

будут плавные переходы

Answer 2

А как насчет position: relative и отрицательных полей?

С макушки головы:

.parent {}

.child1 {
    height: 200px;
}

.child2 {
    margin-top: -200px;
    height: 200px;
}