How to Position One Image on Top of Another in HTML/CSS? | Image Overlay Example

0 4829

In this tutorial, I am explaining the code for positioning one image on top of another in HTML/CSS. While making a design, sometimes it is essential to position image over top of another image. With the code mentioned below, this can be achieved in a very simple way using CSS.

I am using CSS properties like position and z-index to make this riddle simple.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title> Position Image Over Image </title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <style>

        .main-parent {
        position: relative;

      }
      .image1 {
        position: relative;
        top: 0;
        left: 0;
        border: 1px solid red;
      }
      .image2 {
        position: absolute;
        top: 10px;
        left: 25px;
        border: 1px solid red;
      }

    </style>
  </head>
  <body>

    <div class="mid">
    <h1>Position Image Over Image</h1>
    <div class="main-parent">
      <img class="image1" src="https://placehold.it/50" />
      <img class="image2" src="https://placehold.it/100" />
    </div>

    </div>
  </body>
</html>

Output: