Блог

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

У меня есть карта, и я пытаюсь установить на ней несколько булавок. Карта представляет собой статическое изображение, а контакты — это фоновые изображения div. Чтобы установить контакты в месте моего желания, я устанавливаю его положение на абсолютное и соответствующим образом перемещаю контакты (вверху, слева). Теперь, если размер окна изменится, очевидно, что значки не останутся на карте.

Если я использую% для top и left, пины перемещаются вместе с картой, но расположение пинов слишком специфично. Что-то вроде 56 пикселей, 896 пикселей и т.д. так что процент не помогает.

Есть ли другой способ, которым я могу это сделать? Я бы не возражал против использования jQuery, но если есть способ с помощью CSS, я более чем счастлив.

Вот пример: http://jsfiddle.net/RKyGV/2/show/ Попробуйте изменить размер окна.

Большое спасибо

Установите положение: относительное на вашей карте; поместите булавки в качестве дочерних элементов вашей карты с положением: абсолютное. Теперь их координаты указаны относительно карты.

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

HTML

 <div id="map">
    <div class="pin">
    </div>
</div>
 

CSS

 #map{
    background:url("http://placehold.it/200x200");
    width:200px;
    height:200px;
    position:relative;
}

.pin {
    background:url("http://placehold.it/16x16/915");width:16px;height:16px;position:absolute;top:150px;left:30px;
}