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

Question

我是一个菜鸟，每天都在努力学习更多关于CSS的知识（尽管我很笨拙而且“不自然”，我的大脑就像一台旧电脑一样窜出来）。我想了解如何编写一组独立模块，这些模块共享相同的样式，并以两行两列的形式内联显示。我想为每个模块重新创建一个纸叠，使用z-index和absolute定位。

我制作了这张图片来展示我在寻找的东西：

我为顶部div尝试display:inline - 但是这样，我必须使用position:absolute和坐标为每个模块编码单独的重叠div。最理想的是，可以使用相同的类重复单个模块+重叠（无需更改每个模块的重叠div坐标）。

有没有人知道如何使用CSS做到这一点？提前谢谢你：）

Answer 1

这样的事可能会对你有所帮助。 Fiddle

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

Answer 2

是的，您可以执行以下操作。您需要调整大小以适合您的最佳尺寸。 JS在这里：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;
}