Absolute Position a Child Div inside Fluid Parent

Question

I am trying to put a pointer on a map that will always be in the same spot of the div parent. Here is the fiddle - https://jsfiddle.net/mfgdp3j3/

The idea is to have the pin always stay in the same spot as the image/browser changes size so if the browser is 1000px = pin same spot as if the map was 350px (by same spot I mean location on the image).

Quick code:

<div id="main_container">
    <div id="map_container">
        <img id="map_image" src="https://familysearch.org/learn/wiki/en/images/0/06/Illinois-county-map.gif">
        <img id="pin_it" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Ball-Chartreuse.png">
    </div>
</div>

*{margin:0;padding:0}
html{position:relative;}
#main_container {max-width:1000px;}
#map_container {width:100%; position:relative;padding:0; margin:0}
#map_image {width:100%; padding:0; margin:0}
#pin_it{position:absolute; top:10%; left:10%}

Answer 1

1. If you want to keep the width of the icon as it is, even in smaller screens.

You can use transform:translate(-50%,-100%) and then adjust the left and top percentage values to position the icon.

Fiddle: https://jsfiddle.net/mfgdp3j3/14/

2. If you want the icon to resize based on the screen size.

Additionaly, you can set a min-width and max-width if you feel the icon size is too big/small when you resize.

Fiddle: https://jsfiddle.net/0yozs4tr/

3. If you want the icon to resize along with the image

Set the width of the icon in percentage (something like 24%). In this case, the icon might look too small in smaller screen sizes.

Fiddle: https://jsfiddle.net/mfgdp3j3/18/