Sometimes, we want to position one image on top of another in HTML and CSS.
In this article, we’ll look at how to position one image on top of another in HTML and CSS.
How to position one image on top of another in HTML and CSS?
To position one image on top of another in HTML and CSS, we set the position property.
For instance, we write
<div class="parent">
<img class="image1" src="https://via.placeholder.com/50" />
<img class="image2" src="https://via.placeholder.com/100" />
</div>
to add a div with some img elements.
Then we write
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 30px;
left: 30px;
border: 1px green solid;
}
to put the img element with class image2 on to of the one with class image1 with position: absolute;.
We set the top and left values to set the vertical and horizontal positions relative to the parent respectively.
Conclusion
To position one image on top of another in HTML and CSS, we set the position property.
