将图像堆叠在彼此的CSS上

Question

我一直在努力使这些图像彼此重叠。我已经尝试过使用位置和z-index，但是无法正常工作。请帮助。 CSS / HTML。

HTML。

<div class="test">
    <img class="bg" src="images/pattern-bg.svg" alt="">
    <img class="img" src="images\image-tanya.jpg" alt="tanya">
</div>

CSS
`````````````````````````````````````````````````````````````````
.bg {
  position: relative;
  height: 450px;
  width: 450px;
  margin: 0;
}

img {
  position: relative;
  float: right;
  height: 350px;
  width: 350px;
}
``````````````````````````````````````````````````````````````````
Thank You.

Answer 1

尝试一下。

    .rect
    {
      position: relative;
      top: 0;
      left: 0;
    }
    .another-rec
    {
      position: absolute;
      top: 60px;
      left: 80px;
    }

<div style="position: relative; left: 0; top: 0;">
            <img src="https://dummyimage.com/600x400/000/fff" class="rect"/>
            <img src="https://dummyimage.com/600x400/ccc/fff" class="another-rec"/>
          </div>