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

Question

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

我制作了这张图片以显示我正在寻找的内容：

我尝试display:inline了顶部 div - 但是这样，我必须为每个模块编写单独的重叠 div，使用position:absolute和坐标。最理想的是可以使用相同的类重复单个模块+重叠（无需更改每个模块的重叠 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;
}