позиционировать фиксированные изображения в div (контакты на карте)

Question

У меня есть div "map" с правилами css height: 400px; width: 800px; background: url(map.png).Этот div имеет фоновое изображение карты мира.У меня есть некоторые изображения, которые действуют как «булавки», которые я хочу разместить на карте в определенных областях.Какие свойства CSS я бы дал изображению, чтобы иметь возможность, например, поместить его в div «map» по определенным координатам верхнего / левого пикселя div «map»?Я могу расположить их относительно всего тела, но не относительно конкретного div.

Answer 1

Положите положение: относительное на карте div, затем поместите положение: абсолютное на контакты.Использование:

left: 10px;
top: 10px;
position: absolute;

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

Answer 2

Вы можете сделать это, используя position: absolute.Он будет позиционироваться относительно первого относительно позиционированного родителя.Поэтому убедитесь, что элемент карты, в котором создаются выводы, установлен на position: relative.Пример:

#map {
  position: relative;
}

#pin_a {
  position: absolute;
  top: 25px;
  left: 10px;
}

Вы можете использовать верхнюю, нижнюю, правую, левую.

Answer 3

Самое простое, что нужно сделать, это поместить их в map div, дать #map { position: relative; }, а затем дать пинам position: absolute; со свойствами top и left (вероятно, что вы уже делаете). 1006 *

Если невозможно вставить пины в саму map, вы можете сделать то же самое с контейнером div:

<div id="map-wrapper">
    <div id="map">...</div>
    <!-- pins -->
</div>

В любом случае, смысл в том, что absolute позиционирование относительно ближайшего родителя, который по умолчанию имеет position: relative; Это body, но вы можете присвоить это свойство любому другому элементу, который вам нужен.

Answer 4

Вам необходимо установить position: relative; на карте. Это не повлияет на позиционирование карты div, но создаст содержащий блок для его дочерних элементов. Сделав это, вы сможете позиционировать рынок с position:absolute; и left/right. Их положение будет вычислено по отношению к верхнему левому углу карты div.

Смотрите здесь полный справочник по содержанию блоков и позиционированию: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details