html中绝对定位的父级,html – 绝对定位流体父级内的子Div

我试图将一个指针放在一个始终位于div父级的同一位置的地图上.这是小提琴 –

https://jsfiddle.net/mfgdp3j3/

这个想法是让图钉/浏览器的尺寸始终保持在同一位置,所以如果浏览器是1000px = pin相同的点,就像地图是350px一样(相同的点我的意思是图像上的位置).

快速代码：

*{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%}