使用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在地圖上定位點

回答

相關問題