How to Position Image Over Image using CSS

In some situation, you may need to place an image over another image. Placing one image over another image is very easy with CSS. You can easily position image on top of another image using CSS. In this tutorial, we will show you how to position an image over image using HTML and CSS.

The example HTML & CSS code snippets place one image over another image.
HTML Code:

<div class="parent">
    <img src="http://www.xwebtools.com/dummy-image/600x400/000/fff" />
    <img src="http://www.xwebtools.com/dummy-image/85x70/fff/000" class="over-img"/>
</div>

CSS Code:

.parent{
    position: relative;
}
.over-img{
    position: absolute;
    top: 80%;
    left: 20%;
}

You can change the position of the overlay image using top and left Property in CSS.