HTML/CSS - Put img on top of img?

Question

I have two png's. One is the actual image, another is a mostly transparent image with a sticker price icon in the top right. I know I could combine these in photoshop and just create one image.

But I need these to be generated dynamically, for a bunch of different base images.

Is there some way to code the "actual image" and then use code to overlay the "transparent sticker image"?

Answer 1

Sure, the easiest way would be to absolutely position both images within their container:

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

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

The position:absolute is not needed on the base image if both images are in the top-left corner, but having it allows you to tweak its placement if needed.

You could also use static position on the main image and relative position on 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 to work you'd need to know the width of the base image.

Answer 2

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

The two images can then be given the css {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 the z-index of each image.