Позиционирование точек на карте с помощью css

Question

Я ищу способ решить проблему, я делаю карту с местоположениями, местоположения указаны точками, однако я использовал позицию: relative; поэтому он подсчитывает верхний левый угол от вершины контейнера, но теперь я понял, что это не сделано, и оно сдвигается вниз, поскольку есть несколько «точек», я не могу найти способ обойти это, есть ли простой способ этого?

Preview: удален взглянуть на точки по missisipy (по морю) и точку вправо, они скупы быть на той же высоте, но они не являются ..

Answer 1

Я думаю, что положение: абсолют может быть лучше , относительный будет вычисляться из исходного положения. Точная цитата из w3schools:

Относительный позиционированный элемент расположен относительно его нормального положения.

Скорее всего, в исходной структуре DOM одна «точка» находится над другой, поэтому, если позиция для высоты одинакова, тогда вы будете выше, чем вы видите.

однако для абсолютного, еще прямые w3s процитировать:

Абсолютное положение элемент позиционируется относительно первого родительского элемента, который имеет место, кроме статической. Если такой элемент не найден, то содержащий блок является html:

Абсолютный должен работать без изменения чего-либо еще до тех пор, пока не существует родительский элемент с положением, отличным от статического. Если есть, то переработайте числа, и вы должны быть хорошими.

фиксированной может работать как хорошо, но что может вызвать проблемы, если экран просмотра разве достаточно большой для всей карты, что мина была так не вопрос здесь, но ...

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, что позволяет вы можете поместить свои элементы относительно родительского контейнера.

Единственное правило в том, что вы родительский контейнер должен быть 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/