How To Position One Image On Top Of Another Image Using CSS
Here we consider how to place one image over another using css.
Lets start with one example here.
Suppose we have two images inside a div as shown below.
On runtime, it may look like this.
Now for placing the Second image over first image, we can apply following style.
.clsFirstImg {
width: 25%;
position: relative;
top: 0;
left: 0;
}
.clsSecondImg {
width: 25%;
position: absolute;
top: 20px;
left: 40px;
}
That's all, by placing above style we can position one image over another.
Here the image that needs to be on Top, apply position as absolute.
And then we can change the top image's position by using Top and Left.
Here we have given Top as 20px and Left as 40px.
For exact Top, place Top as 0px and Left as 0px.
The result is as shown below.
