html - 将子 Div 绝对定位在 Fluid Parent 中

Question

我试图在 map 上放置一个指针，该指针始终位于父级 div 的同一位置。这是 fiddle - https://jsfiddle.net/mfgdp3j3/

想法是让 pin 始终保持在图像/浏览器改变大小的相同位置，因此如果浏览器为 1000px = pin 与 map 为 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%}

Answer 1

<强>1。如果您想保持图标的宽度不变，即使在较小的屏幕上也是如此。

您可以使用 transform:translate(-50%,-100%) 然后调整 left 和 top 百分比值来定位图标。

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

<强>2。如果您希望图标根据屏幕尺寸调整大小。

此外，如果您在调整大小时觉得图标太大/太小，可以设置min-width 和max-width。

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

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

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

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