将图像堆叠在一起 CSS

Question

几个小时以来，我一直在尝试让这些图片重叠显示。我试过使用 position 和 z-index，但没用 work.Please 帮助。 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>

将图像堆叠在一起 CSS

Stacking images on top of each other CSS

html

css

css-position