Layering PNG in HTML/CSS?

Question

I want to make an interactive map of the world using HTML, CSS, and JS. Using SVG was probably the recommended way to go, but to be honest I have no experience in utilizing it. Plus editing paths for doing minor changes is a pain. I really prefer exporting each country as a PNG image, placing them in HTML, and JS will handle all the interaction.

It's really easy in concept. The problem however is that how to layer these different PNGs so that each countries will be on its specific place? If you use two <img src=... it would either put the images into a column or a row:

This is how it should be

But this is how it will show up in HTML

or this

• Are there any ways I could stack these images together without putting them into a column or row?
• If not, is it possible to track a cursor's position within an image? If putting the countries individually on a PNG won't work, I'm planning to export the whole map of the world into one PNG and then monitor what is the cursor's position when clicking the image so I could get the specific country the user clicked on. Is that possible?

Forgive me for being too naive of this. Thanks a ton!

Answer 1

For this case, I would use position:absolute on the images, and use the left, right, top, bottom properties to align them how you like. Just be sure to set position:relative to your parent div.

If this is not possible for whatever reason, you can use the transform property to set the horizontal and vertical position.