Помещение Div в любом месте документа и его расположение после изменения размера окна

Question

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

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

Если я использую% для верхнего и левого, булавки перемещаются вместе с картой, но расположение булавок слишком конкретное.Что-то вроде 56px, 896px и т. Д., Поэтому процент не помогает.

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

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

Спасибомного

Answer 1

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

Answer 2

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

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;
}