HTML / CSS - Put img on top of img?

Question

I have two png. One of them is an image, the other is a transparent image with a sticker price icon in the upper right corner. I know that I could combine them in Photoshop and just create one image.

But I need them to be generated dynamically, for many different basic images.

Is there a way to encode the “actual image” and then use the code to overlay the “transparent sticker image”?

Answer 1

Of course, the easiest way would be to absolutely position both images in your container:

<div style="position:relative"> <img src="main-image.jpg" style="position:absolute;"/> <img src="overlay-image.png" style="position:absolute;"/> </div> 

position:relative on the container is necessary for the absolute positioning of children to work. Of course, if the container itself is already installed, then that's fine.

position:absolute not required on the base image if both images are in the upper left corner, but if necessary, it allows you to adjust its placement.

You can also use the static position in the main image and the relative position in the overlay image:

 <div style="position:relative"> <img src="main-image.jpg" style="width:100px"/> <img src="overlay-image.png" style="position:relative; left:-100px"/> </div> 

but for this you will need to find out the width of the base image.

Answer 2

Wrap the images in a <div> with the first overlay image and the actual image in the second and set the css from the div to position: relative .

Then two images can be assigned css {position: absolute; top: 0; left: 0;} {position: absolute; top: 0; left: 0;} {position: absolute; top: 0; left: 0;} .

 <div style="position:relative;"> <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> <img src="actual.png" style="position: absolute; top: 0; left: 0;"> </div>` 

If you really want to be safe, you can set a z-index for each image.

Answer 3

You need to set the relative or absolute attribute of the position, set the attributes on the left and top to the desired values, and then set the z-index attribute to 1 (provided that you do not already have other z-index properties set). Keep in mind that the place where the image should be displayed without changing the top and left attributes will be where it should be.