Html – How to position one image on top of another in HTML


I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.

I just want to position overlapping images relative to one another.

As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.

Best Solution

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
<div class="parent">
  <img class="image1" src="" />
  <img class="image2" src="" />

As the simplest solution. That is:

Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.