How to let an HTML image overlap another

Question

Answer 1

You would have to use positioning and z-index to get this to work, with changing the images to block level elements and adding a class:

.mainRunner {
  border: 1px solid #000;
  position: relative;
}

.img1 {
  border: 1px solid #f00;
  position: relative;
  z-index: 2;
}

.img2 {
  border: 1px solid #0f0;
  position: relative;
  z-index: 1;
  top: -12px;
  left: 12px;
}