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.