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

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


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.


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

        .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;


    <div class="mid">
    <h1>Position Image Over Image</h1>
    <div class="main-parent">
      <img class="image1" src="" />
      <img class="image2" src="" />



I hope you have understood how to create to position an image over another using the above sample code in HTML/CSS.

Please leave a comment if you find this blog useful. Do subscribe to our website for more solutions.

Best WordPress Hosting


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price

Leave a Reply

    Waiting for your comments