how to place an image over another image in html
<!--Change the values of top and left to change the location of the images--> <!--If you want to change which image is infront use z-index: (index number)--&gt; <!--The higher the z-index number will be displayed infront--> <style> .parent { position: relative; top: 0; left: 0; } .image1 { position: relative; top: 0; left: 0; border: 1px red solid; z-index: 2; } .image2 { position: absolute; top: 30px; left: 30px; border: 1px green solid; z-index: 1; } </style> <body> <div class="parent"> <img class="image1" src="https://placehold.it/50" /> <img class="image2" src="https://placehold.it/100" /> </div> </body>