Question

我有一个带有css规则height: 400px; width: 800px; background: url(map.png)的“map”div。该div具有世界地图的背景图像。我有一些图像作为“引脚”，我想在特定区域放置在地图上。我将赋予图像哪些CSS属性，例如，通过“map”div的特定顶部/左侧像素坐标将它们放置在“map”div中？我可以将它们相对于整个身体定位，但不能定位到特定的div。

Answer 1

将位置：相对放在地图div上，然后将位置：绝对放在引脚上。使用：

left: 10px;
top: 10px;
position: absolute;

在引脚上的

，虽然它们由地图div包含，它具有相对位置，但会将引脚放在左上角。我希望这很清楚......

Answer 2

最简单的方法是将它们放在map div中，给#map { position: relative; }，然后为position: absolute; top提供left和map属性（可能你正在做的事情。）

如果不能将引脚放在<div id="map-wrapper"> <div id="map">...</div>  </div>本身，你可以用容器div做同样的事情：

absolute

无论哪种方式，关键是position: relative;定位是相对于最近的父body，默认情况下是{{1}}，但您可以将该属性赋予您的任何其他元素想。

Answer 3

您可以使用position: absolute执行此操作。它将相对于第一个相对定位父级定位自己。因此，请确保创建引脚的地图元素设置为position: relative。例如：

#map {
  position: relative;
}

#pin_a {
  position: absolute;
  top: 25px;
  left: 10px;
}

您可以使用顶部，底部，右侧，左侧。

Answer 4

您需要在地图上设置position: relative;。这不会影响map div定位，但会为其子项建立一个包含块。完成此操作后，您将能够使用position:absolute;和left/right定位市场。它们的位置将相对于地图div的左上角计算。

请参阅此处以获取有关包含块和定位的完整参考：http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

在div中定位固定图像（地图上的图钉）

4 个答案: