內嵌顯示重疊的div

我是一個菜鳥，想每天更多地瞭解CSS（即使我笨拙和「不自然」，我的大腦蒸出像一臺舊電腦）。我想了解如何編寫一組共享相同樣式的獨立模塊，並以兩行兩列內聯顯示。我想重新建立一個紙疊的每個模塊，採用z-index和absolute定位它。內嵌顯示重疊的div

我做了這個形象展示一下我在尋找：

enter image description here

我試圖display:inline的頂格 - 但這樣一來，我只好代碼個別重疊的div每個模塊，使用position:absolute和座標。什麼是最可取的是，單個模塊+重疊可重複使用同一類（而不必更改每個模塊的重疊DIV座標）。

有沒有人有關於如何做到這一點使用CSS的想法？預先感謝您:)

來源

2013-10-04 Marian Kay

是的，你可以做到以下幾點。您需要調整尺寸以適合您的任何尺寸。這裏的jsfiddle：http://jsfiddle.net/CNPJ9/2/

<div class="contain"> 
    <div class="box"> 
     <h1>A</h1> 

    </div> 
    <div class="behind"></div> 
</div> 
<div class="contain"> 
    <div class="box"> 
     <h1>B</h1> 

    </div> 
    <div class="behind"></div> 
</div> 
<div class="contain"> 
    <div class="box"> 
     <h1>C</h1> 

    </div> 
    <div class="behind"></div> 
</div> 
<div class="contain"> 
    <div class="box"> 
     <h1>D</h1> 

    </div> 
    <div class="behind"></div> 
</div> 

.contain { 
    margin:25px 25px; 
    float:left; 
} 
.box h1 { 
    font: 8em normal Futura, sans-serif; 
    text-align:center; 
    color:#f1f1f1; 
} 
.box { 
    width:400px; 
    height:300px; 
    background:#000; 
    z-index:1; 
    float:left; 
    position:absbolute; 
} 
.behind { 
    width:350px; 
    height:325px; 
    margin-left:25px; 
    background:#333; 
    z-index:2; 
}

來源

2013-10-04 22:11:42 benny

這完美無缺@Blake。非常感謝！！ –

只是一個小問題@Blake，如果你不介意的話......我怎麼會對齊整個模塊集合到文檔的中心？ –

margin：auto爲包含這些div的父元素。 – benny

像這樣的東西可以幫助你。 Fiddle

.abc{ 
    width=300px; 
    height:200px; 
    margin:50px; 
    border:solid 2px black; 
    border-bottom: 5px double blue; 
}

來源

2013-10-04 21:22:52 vishalkin

我需要的是由頂部的大DIV（A，B，C和d）重疊的股利。 –

內嵌顯示重疊的div

回答

相關問題