1

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

Using:position: absolute; top: 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 获得类似 cardflip 的操作（使用 jQuery 或 Webkit/CSS），我全都听好了！

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

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

2 回答 2

2

将其中一个设置为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>淡出

于 2010-06-07T08:43:41.613 回答
0

position: relative负边距又如何呢？

在我的头顶上：

.parent {}

.child1 {
    height: 200px;
}

.child2 {
    margin-top: -200px;
    height: 200px;
}
于 2010-06-07T01:22:56.813 回答