jquery - 用css在地图上定位点

Question

我正在寻找解决问题的方法，我正在制作带有位置的地图，位置用点表示，但是我一直在使用 position:relative; 所以它从容器顶部计算左上角，但现在我意识到它不是这样做的，它会向下移动，因为有几个“点”，我找不到解决这个问题的方法，有一个简单的方法吗？

预览：删除了看一下missisipy（海边）的点和右边的点，它们的意思是在相同的高度，但它们不是..

Answer 1

我认为 position:absolute 可能会更好。相对将从原始位置计算。w3schools 的准确报价：

相对定位的元素是相对于其正常位置定位的。

最有可能在原始 DOM 结构中，一个“点”位于另一个之上，因此如果高度的位置相同，那么如您所见，一个将高于另一个。

但是对于绝对而言，另一个直接的 w3s 报价：

绝对位置元素相对于第一个具有非静态位置的父元素定位。如果没有找到这样的元素，则包含块是 html：

只要不存在位置不是静态的父元素，absolute 就应该工作而无需更改任何其他内容。如果有然后返工数字，你应该很好。

固定的也可以工作，但如果查看屏幕对于整个地图来说不够大，那会导致问题，我的在这里不是问题，但是......

Answer 2

我不是 100% 确定我是否理解您遇到的问题，但我认为这是因为点是相对于锚标签定位的，每次添加锚标签时，它都会放置在前一个锚标签的下方. 我认为定位锚标签而不是锚标签内的 div 会起作用。所以而不是

<a href="http://www.tampaport.com/" target="_blank" class="dot_class">
  <div class="dot" style="top: 255px; left: 642px; opacity: 1; " data-title="Tampa Port Athority">
  </div>
</a>

你可以试试

<a href="http://www.tampaport.com/" target="_blank" class="dot_class" style="top: 255px; left: 642px; opacity: 1; ">
  <div class="dot"  data-title="Tampa Port Athority">
  </div>
</a>

并确保将锚显示为具有相对位置的块：

a.dot_class{
  display: block;
  position: relative;
}

Answer 3

您必须使用我们absolute positionning，它允许您相对于父容器定位元素。

唯一的规则是你的父容器也必须定位，所以你可以添加position: relative它，它的位置不会受到影响，但它会成为一个定位元素。

您的 HTML：

<div class='map'>
    <span class='point p1'></span>
    <span class='point p2'></span>
    <span class='point p3'></span>
    <span class='point p4'></span>
</div>​

你的 CSS：

.map {
    position: relative;
    [...other styling...]
}

.point {
    position: absolute;
    left: [...X coordinate...];
    top: [...Y coordinate...];
    [...other styling...]
}

在这里演示：http: //jsfiddle.net/YYmde/