1

私のCSS-fuは、ここで私を失望させています。私がやりたいのは、2つの子div（可変の高さ）をオーバーラップするように配置することです。

親をに設定して、 ：を使用position: absolute; top: 0px; left: 0px;することが私が知っている唯一の方法position: relativeです。

これに伴う問題は、CSS仕様に従って子divがレイアウトから削除され、親divが高さ0pxに縮小されるため、そのdivをクリアして、下にコンテンツを配置できないことです。

以下の私の驚くべきASCIIアートは、私が何をしようとしているのかを詳しく説明しています...何かアイデアはありますか？

余談ですが、スムーズなjQueryフェードのために、これらのdivを正確にオーバーラップさせる必要があります。また、Appleのカードフリップデモである新しいWebkitトランスフォームのいくつかを試してみる必要があります： https：//developer.apple.com/library/archive/samplecode/ CardFlip / Introduction / Intro.html

CSSでそれらを正確にオーバーラップさせる別の方法がある場合、および/または可変の高さの2つの子divを使用してカードフリップのようなアクション（jQueryまたはWebkit / CSSを使用）を取得する別の方法がある場合、私はすべての耳です！

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

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

2 に答える 2

2

そのうちの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);

そして今、あなたは2つ<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 に答える