带有子重叠div的div的内联显示

Question

我是一个菜鸟，每天都在尝试学习有关CSS的更多信息（即使我笨拙且“不是自然的”，我的大脑也像一台旧计算机一样蒸腾）。 我想了解如何编写一组独立的模块，这些模块共享相同的样式并以两行两列的形式内联显示。 我想使用z-index和absolute定位为每个模块重新创建纸叠。

我制作了这张图片来显示我在寻找什么：

我尝试对最上面的div使用display:inline但这样，我必须使用position:absolute和坐标来为每个模块编写单独的重叠div。 最希望的是，可以使用相同的类来重复单个模块+重叠（而不必更改每个模块的重叠div坐标）。

有谁知道如何使用CSS做到这一点？ 先感谢您 ：）

Answer 1

这样的事情可能会帮助您。 小提琴

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

Answer 2

是的，您可以执行以下操作。 您需要将尺寸调整为最适合您的尺寸。 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;
}