图像未与另一图像正确重叠

Question

我的输出是这样的

但我希望下图与上图完全对齐，从而创建一个单一的图像印象，其中下部为下图，上部为上图。编辑：我想要：

我的html代码：

.shamne {
  width: 50%;
  position: relative;
  top: 0;
  left: 0;
}

.pichone {
  width: 50%;
  position: absolute;
  top: 0px;
  left: 20px;
}

<div class="col-md-3 col-lg-6 col-12 mb-4">
  <div>
    <img src="images/fake_m.png" class="shamne" />
    <img src="images/tamim1.png" class="pichone" />
  </div>
</div>

Answer 1

您可以查看以下内容：

fiddle 玩转

.row {
  height: 300px;
  width: 300px;
  position: relative;
}

.shamne {
  width: 100%;
  height: 100%;
  border: 3px solid blue;
}

.pichone {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 3px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <div class="row">
    <img src="http://placekitten.com/301/301" class="shamne" />
    <img src="http://placekitten.com/201/201" class="pichone" />
  </div>
</div>

Answer 2

同时使用位置 position: absolute，第二张图片选择比第一张高的 z-index，希望它能起作用

图像未与另一图像正确重叠

image not correctly overlapping with another image

html

css

web-deployment