How to Position One Image on Top of Another in HTML/CSS

Sometimes, you may need to position one image on top of another. This can be easily done with HTML and CSS. For that, you can use the CSS position and z-index properties.

First, we are going to show an example where we use the position property.

Create HTML

  • Use a <div> with a class name "parent".
  • Add two <img> elements with the following class names: “image1” and “image2”.
<div class="parent">
  <img class="image1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
  <img class="image2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
</div>

Add CSS

  • Add a relative div placed in the flow of the page.
  • Set the background image as relative so as the div knows how big it must be.
  • Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #000000;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid #000000;
}

Let’s see the full example.

Example of positioning an image on top of another using the position property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        position: relative;
        top: 0;
        left: 0;
      }
      .image1 {
        position: relative;
        top: 0;
        left: 0;
        border: 1px solid #000000;
      }
      .image2 {
        position: absolute;
        top: 30px;
        left: 30px;
        border: 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <img class="image1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
      <img class="image2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
    </div>
  </body>
</html>

Result

image 1 image 2

In this example, we used both the relative and absolute values of the position property. The relative value places an element relative to its normal position. The absolute value removes elements from the document flow, and elements are positioned relative to its positioned ancestor element.

Now, let’s see an example where we use both the position and z-index properties.

Example of positioning an image on top of another using the position and z-index properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .image1 {
        position: absolute;
        top: 10px;
        left: 10px;
        border: 1px solid #000000;
        z-index: 1;
      }
      .image2 {
        position: absolute;
        top: 25px;
        left: 25px;
        border: 1px solid #000000;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <img class="image1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
    <img class="image2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" />
  </body>
</html>

In the example mentioned above, we set the position to absolute for both elements.