How can we overlap two images using css style?

css, html, image

Solution

.under {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.over {
  position: absolute;
  left: 40px;
  top: 10px;
  z-index: -1;
}

<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />

Problem

I have a list of images in an html table and need to overlap a small icon on each image. How can we do this using z index and positioning?

Original source

Related problems