Html 子Div在流体父对象中的绝对位置

我试图在一个映射上放置一个指针，该映射将始终位于div父节点的同一位置。这是小提琴-

这样做的目的是，在图像/浏览器更改大小时，pin始终保持在同一位置，因此，如果浏览器为1000px=pin，则与地图为350px时保持相同的位置（相同的位置是指图像上的位置）

快速代码：

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

*{边距：0；填充：0}
html{position:relative；}
#主容器{最大宽度：1000px；}
#map_容器{宽度：100%；位置：相对；填充：0；边距：0}
#映射图像{width:100%；填充：0；边距：0}
#引脚{位置：绝对；顶部：10%；左侧：10%}

1。如果您想保持图标的宽度，即使是在较小的屏幕中也是如此。

您可以使用

transform:translate（-50%，-100%）

，然后调整

左侧

和

顶部

百分比值以定位图标

小提琴：

2。如果希望图标根据屏幕大小调整大小。

此外，如果在调整大小时感觉图标大小太大/太小，可以设置

最小宽度

和

最大宽度

小提琴：

3。如果希望图标随图像一起调整大小

设置图标宽度的百分比（大约24%）。在这种情况下，图标在较小的屏幕尺寸中可能看起来太小

---

小提琴：这是我找到的唯一方法-