css - 在两个不同的 div 内的相同位置重叠多个图像

Question

我有以下 HTML 代码:

<div id="divFather" class="clsFather">
    <div class="clsSon">
        <img src="A.png">
        <img src="B.png">
    </div>
    <div class="clsSon">
        <img src="A.png">
        <img src="B.png">
    </div>
</div>

这是 .css 文件:

.clsSon{
float: left;
width: 50%;
text-align: center;
position: relative;}

.clsSon img{
position: absolute;
top: 0px;
left: 0px;}

有了这个，我试图在一行中有两个 div，每个 div 中有两个重叠的图像。但取而代之的是，我只在一个地方重叠了四张图片。我想在两个 div 的一行中获得 2 + 2 个重叠图像。我怎样才能得到它？

Answer 1

像这样吗？

.clsSon {
  float: left;
  height: 160px;
  width: 160px;
  text-align: center;
  position: relative;
}

.clsSon img {
  position: absolute;
  top: 0px;
  left: 0px;
}

<div id="divFather" class="clsFather">
    <div class="clsSon">
        <img src="http://source.unsplash.com/160x160">
        <img src="http://source.unsplash.com/160x160/?mountain">
    </div>
    <div class="clsSon">
        <img src="http://source.unsplash.com/160x160">
        <img src="http://source.unsplash.com/160x160/?mountain">
    </div>
</div>