使用css在地图上定位点

我正在寻找一种方法来解决问题，我正在制作一个包含位置的地图，位置由点表示，但是我一直在使用position：relative;所以它从容器顶部算起左上角，但现在我已经意识到它不是由此完成的，并且由于存在几个“点”而下移，我无法找到解决此问题的方法，有没有简单的方法呢？使用css在地图上定位点

前瞻：去除看看由missisipy点（海边）和点到右边，他们均是在同一高度，但他们都没有..

来源

2012-04-16 Saulius Antanavicius

我notied，我可以做的margin-top：-16px;这可能有用，有什么想法？ – 2012-04-16 01:35:27

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

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

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

然而为绝对的，彼此直接w3s引述如下：

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

只要没有静态位置的父元素，绝对应该不改变其他任何东西。如果有，然后重新编号，你应该是好的。

固定可以工作很好，但如果观看屏幕心不是足够大，整个地图，这我的是这样不是一个问题在这里，但会导致问题......

来源

2012-04-16 02:06:43

事实上，“绝对定位”应该用来代替“相对定位”，因为“绝对定位”是相对于包含块的，而“相对定位”是相对于元件没有定位的位置。但是w3schools不应该被用作参考，更不是作为一个权威。这个问题的权威是CSS 2.1规范：http：//www.w3.org/TR/CSS2/visuren.html#absolute-positioning – 2012-04-16 04:40:38

如果我了解您遇到的问题，我不是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; 
}

来源

2012-04-16 01:47:35

你必须给我们absolute positionning，这使得你将你的元素相对于父容器放置。

唯一的规则是，你父容器必须是positionned，所以你可以再补充position: relative给它，它的位置不会受到影响，但它会成为一个positionned元素。

你的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/

来源

2012-04-16 07:17:36

使用css在地图上定位点

回答

相关问题