Question

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

预览：删除通过missisipy（在海边）和右边的点看看点，它们意味着处于相同的高度，但它们不是..

Answer 1

我认为立场：绝对可能会更好。相对将从原始位置计算。来自w3schools的确切报价：

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

最有可能在原始DOM结构中，一个“点”在另一个之上，所以如果高度的位置相同，那么一个将比你看到的更高。

然而对于绝对，另一个直接的w3s引用：

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

绝对应该在不改变任何其他内容的情况下工作，只要父元素的位置不是静态的。如果有再修改数字，你应该很好。

修复也可以正常工作，但是如果观看屏幕对于整个地图来说不够大，那么这会导致问题，我的这里不是问题但是...

Answer 2

如果我理解你遇到的问题，我不是百分百肯定，但我认为这是因为点相对于锚标记而定位，每次添加锚标记时，它都会被放置在以前的锚标记。我认为将锚标签定位而不是锚标签内的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/

用css在地图上定位点

3 个答案: