Question

我的CSS-fu让我失望：我想做的是将两个子div（变量高度）重叠。

使用：position: absolute; top: 0px; left: 0px;是我知道的唯一方式，将父级设置为position: relative。

这个问题是根据CSS规范将子div从布局中取出，将父div缩小到height：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);

现在，您将在两个<div>之间无缝淡出

Answer 2

position: relative和负边距呢？

脱离我的头顶：

.parent {}

.child1 {
    height: 200px;
}

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

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

2 个答案: