将 Div 放置在文档中的任何位置，并且在窗口调整大小后具有相同的位置答案

【问题标题】：Placing Div anywhere in the document and have the same position after window resize将 Div 放置在文档中的任何位置，并且在窗口调整大小后具有相同的位置
【发布时间】：2011-10-30 22:54:25
【问题描述】：

我觉得问这个问题很菜鸟，但我似乎找不到完美的答案。

我有一张地图，我想在上面设置几个图钉。地图是静态图像，图钉是 div 的背景图像。要将引脚设置在我想要的位置，我将其位置设置为绝对并相应地移动引脚（顶部，左侧）。现在，如果窗口调整大小，很明显图钉不会留在地图上。

如果我在顶部和左侧使用 %，则图钉会随着地图移动，但图钉的位置过于具体。像 56px、896px 等这样的百分比没有帮助。

还有其他方法可以做到这一点吗？我不介意使用 jQuery，但如果有办法使用 CSS，我会非常高兴。

这里是一个例子：http://jsfiddle.net/RKyGV/2/show/尝试调整窗口大小。

非常感谢

【问题讨论】：

标签： css html resize position

【解决方案1】：

设置位置：地图上的相对位置；将图钉放置为地图的子元素，位置为：绝对。现在它们的坐标是相对于地图的。

【讨论】：

【解决方案2】：

就像 Antti Haapala 所说，图钉应该是相对定位地图的绝对定位子元素。这是一个fiddle 表明这一点。

HTML

<div id="map">
    <div class="pin">
    </div>
</div>

CSS

#map{
    background:url("http://placehold.it/200x200");
    width:200px;
    height:200px;
    position:relative;
}

.pin {
    background:url("http://placehold.it/16x16/915");width:16px;height:16px;position:absolute;top:150px;left:30px;
}

【讨论】：