Question

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

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

如果我使用％作为顶部和左侧，则引脚随地图移动，但引脚的位置太具体。像56px，896px等等，所以百分比没有帮助。

还有其他方法吗？我不介意使用jQuery但是如果有一种方法可以使用CSS而不是快乐。

以下是一个示例：http://jsfiddle.net/RKyGV/2/show/尝试调整窗口大小。

非常感谢

Answer 1

在地图上设置位置：相对;将引脚放置为地图的子元素，其位置为：absolute。现在他们的坐标是相对于地图的。

Answer 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;
}

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

2 个答案: