How do I place an image on top of another image?

[popchau]

I am currently attempting to place points onto a map. The points will be an image placed in multiple areas over the map, based on a coordinate. Any help in structuring this problem would be greatly appreciated!

This layout is made entirely with CSS Grid, and I’d prefer to utilize it.

[Beverleyh]

Sorry – we can’t diagnose a vague description. We’d need to see your code in a CodePen demo to offer any specific help. Until then, here are some CSS positioning property for you to research;

• position
• top / left / bottom / right
• z-index

If you haven’t done already, you might also want to look into responsive image techniques (e.g. max-width:100%; height:auto;) and use fluid measures (e.g. % not px) to place your map pins.

I’m not sure what part CSS Grid plays in you map/image dilemma (my guess is that it’s got more to do with the overall page layout than the actual map/image) but hopefully that will become clearer when you provide your reduced CodePen demo. If it doesn’t have anything to do with the immediate map pin placement issue, please leave it out of the demo – we only need just enought CSS and HTML to illustrate the placement problem (i.e. not your whole codebase).

In the meantime, if you need any further help with positioning and layout basics, try this website https://learnlayout.com

[Paulie_D]

Something like this?

https://codepen.io/Paulie-D/pen/dgcha

[Author]

Posts