divを互いに重なり合わせるようにするにはどうすればいいですか？

Question

2つ以上のdivが重なり合う必要があります（いくつかの移行効果、つまりタブの切り替えと遅い消滅が原因です）。

これらの2つのdivの下にはフッター要素があります。

position: absoluteを使用すると、親要素が折りたたまれ、divsがフッター要素と重なって表示されます。

私はスクリプトで最も高い高さを計算できます。しかし、親要素の高さを最大の高さに保つCSSの方法がありますが、子供たちは視覚的に重なり合っていますか？

EDIT：子供の幅も不明であり、デザイン的には反応する。

.parent{ 
 
\t border: 1px solid green; 
 
\t position: relative; 
 
} 
 

 
.one{ 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t width: 300px; 
 
} 
 

 
.two{ 
 
\t background-color: blue; 
 
\t position: absolute; 
 
\t width: 400px; 
 
} 
 

 
footer{ 
 
\t border: 1px solid magenta; 
 
\t text-align: right; 
 
}

<div class="parent"> 
 
\t <div class="one"> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t \t Div one to overlap. Height unknown, width unknown<br> 
 
\t </div> 
 

 
\t <div class="two"> 
 
\t \t Div two to overlap. Height unknown, width unknown<br> 
 
\t \t Div two to overlap. Height unknown, width unknown<br> 
 
\t </div> 
 

 
\t <!-- ... ---> 
 

 
\t <footer> 
 
\t \t Footer must be below all divs 
 
\t </footer> 
 
</div>

Answer 1

いいえ、これが唯一の絶対位置を持つ要素にCSSを持つことはできません。詳細な説明については、this postの回答をご覧ください。

Answer 2

目標を達成したい場合は、絶対位置を使用することはできません。絶対配置された要素は通常のレイアウトから取り除かれるためです。親要素はその高さを知りません。

あなたは以下の方法で行うことができます

：

ライブJsfiddle

CSS：

parent{ 
    border: 1px solid green; 
} 

.one{ 
    background-color: red; 
    float: left; 
    width: 300px; 
} 

.two{ 
    margin-left:-300px; 
    float: left; 
    width: 300px; 
    background-color: blue; 

} 
footer{ 
    clear: both; 
    border: 1px solid magenta; 

} 

HTML：

<div class="parent"> 
    <div class="one"> 
     Div one to overlap. Random unknown<br> 
    Div one to overlap. Random unknown<br> 
    Div one to overlap. Random unknown<br> 
    </div> 

    <div class="two"> 
     Div two to overlap. Random unknown<br> 
    Div two to overlap. Random unknown<br> 

    </div> 

    <!-- ... ---> 

    <footer> 
     Footer must be below all divs 
    </footer> 
</div> 

制限事項：

• あなたはどちらか同じ幅を使用するか、以前のdivの大きな幅の負の値として左マージンの値を使用する必要がdivタグ
• の幅を知っている必要があります。

は説明：

浮かべ要素が並んで座ります。 margin-leftの負の値を使用すると、前のdivにオーバーレイされます。次に、すべてのdivの下にフッターを残すフッターの両方にclearプロパティを設定します。