重叠的两个div和“清算”父DIV(Overlapping two divs and 'cl

我的CSS-FU是让我到这里：我想要做的是位置的两个孩子的div（ 可变高度）被重叠。

使用： position: absolute; top: 0px; left: 0px; position: absolute; top: 0px; left: 0px; 是我知道怎么回事，与父设置的唯一途径position: relative 。

这里的问题是，孩子的div取出布局按照CSS规范，缩小家长的div高度：0像素，所以，我不能明确该分区，并把下面的内容。

下面我惊人的ASCII艺术详细说明了我要为...任何想法？

顺便说一句，我需要这些div被精确地重叠平稳jQuery的褪色，也许尝试一些新的Webkit变换，一拉苹果的cardflip演示： https://developer.apple.com/library/archive/samplecode/ CardFlip /简介/ Intro.html

如果有另一种方式，让他们在CSS精确地重合，和/或是否有另一种方式来获得cardflip般的动作（使用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;
}

文章来源: Overlapping two divs and 'clearing' their parent div