重叠两个 div 并“清除”他们的父div

Question

我的 CSS-fu 让我失望了： 我想做的是将两个子 div （具有 可变 高度）定位为重叠。

使用：位置：绝对；顶部：0px； left: 0px; 是我知道的唯一方法，将父级设置为 position:relative。

这样做的问题是，子 div 会根据 CSS 规范从布局中取出，将父 div 缩小到高度：0px，这样我就无法清除该 div 并在下面放置任何内容。

下面我令人惊叹的 ASCII 艺术详细说明了我想要的内容...有什么想法吗？

顺便说一句，我需要这些 div 完全重叠以实现平滑的 jQuery 淡入淡出，并且可能尝试一些新的 Webkit 转换，例如 Apple 的 cardflip 演示： https://developer.apple.com/library/archive/ Samplecode/CardFlip/Introduction/Intro.html

如果有另一种方法可以让它们在 CSS 中完全重叠，和/或如果有另一种方法可以通过两个子 div 获得类似卡片翻转的操作（使用 jQuery 或 Webkit/CSS）高度可变，我洗耳恭听！

|-------------------------------------------------|
|  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);

现在您将在两个

之间实现无缝淡入淡出

Answer 2

position:relative 和负边距怎么样？

我的头顶上浮现出：

.parent {}

.child1 {
    height: 200px;
}

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