Stacking images on top of each other CSS

Question

I've been trying for hours to make these images appear on top of each other. I've tried using position and z-index but I can't make it work.Please help. 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.

_I've tried using position and z-index..._ Where is the related code? — B001ᛦ, May 29 '20 at 14:52

score 1 · Accepted Answer · answered May 29 '20 at 14:58

Try this..

    .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>

Stacking images on top of each other CSS

1 Answers1