2011-12-28 12 views
0

私はdiv(id = placeholder)をテーブルセルに置いています.3つの入れ子div(content1、content2、content3)があります。これらのネストされたdivは、親(id =プレースホルダ)と同じサイズを持ち、お互いにオーバーレイしたいと思っています。Divs Overlayシンプルな実装

これを達成する最も簡単な方法は何ですか?私は、クロスブラウザソリューションを探しています。

Htmlの

<table><tr><td> 

<div id='placeholder'> 
    <div id='content1' class='overlay'>...</div> 
    <div id='content2' class='overlay'>...</div> 
    <div id='content3' class='overlay'>...</div> 
<div> 

</td></tr></table> 

答えて

0

CSS

.overlay { position: absolute; } 

HTML

<div id='placeholder'> 
    <div id='content1' class='overlay'>...</div> 
    <div id='content2' class='overlay'>...</div> 
    <div id='content3' class='overlay'>...</div> 
<div> 

そして、あなたは高さでテーブルセルを伸ばすために、細胞内でclearfixにする必要があります。

コード:http://jsfiddle.net/v6Jnr/

UPD:追加されましたクロスブラウザclearfix

コード:確認するために、 `#のplaceholder`にrelative`:http://jsfiddle.net/v6Jnr/2/

+1

あなたは'ポジションをスローするようにしたいでしょうネストされたdivは他の要素に壊れませんか?それとも、このような状況では不要ですか? –

+0

ええ、あなたは 'position:relative'をどこかに置く必要があります。そうしないと、絶対位置はデフォルトでブラウザウィンドウの左上になります。 –

+0

@Samich私が投稿したHTMLよりも少し複雑なHTMLがあります。何らかの理由で、content2がオーバーレイされているのとは対照的にcontent1の下に表示されています。あなたはその問題が何であるか知っていますか? –

関連する問題