Встроенный дисплей divs с дочерними перекрывающимися divs

Question

Я новичок, каждый день стараюсь узнать больше о CSS (хотя я неуклюжий и «не естественный», мой мозг распахивается, как старый компьютер). Я хочу узнать, как закодировать набор независимых модулей, которые имеют один и тот же стиль и отображаются в строках в двух строках из двух столбцов. Я хочу воссоздать стек бумаги для каждого модуля, используя z-index и absolute позиционирование для него.

Я сделал это изображение, чтобы показать то, что я ищу:

Я попытался display:inline для верхней DIV - но таким образом, я должен был индивидуальный код перекрывается дивы для каждого модуля, используя position:absolute и координаты. Что было бы наиболее желательно, так это то, что один модуль + перекрытие можно было бы повторить, используя тот же класс (без необходимости менять согласованные координаты div каждого модуля).

Есть ли у кого-нибудь представление о том, как это сделать с помощью CSS? Заранее спасибо :)

Answer 1

Да, вы можете сделать следующее. Вы хотите изменить размер до размеров, которые вам больше всего нравятся. 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; 
} 

Answer 2

Что-то вроде этого может вам помочь. Fiddle

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