Исправить изображение, чтобы поместить поверх другого изображения (отзывчивый)?

Question

Я хочу зафиксировать изображение булавки (PNG) в позиции на карте. Мне удалось правильно зафиксировать штифт вдоль оси X, но у меня возникают проблемы с перемещением штифта вдоль оси Y при изменении размера окна.

Вот пример того, чего я пытаюсь достичь. В этом примере я хочу убедиться, что пин-код всегда остается на MO. Но bottom: 45% заставляет изображение перемещаться вдоль оси Y при изменении размера окна.

#img1 {
  width: 100%;
  position: relative;
}

#img2 {
  width: 15%;
  position: absolute;
  left: 48%;
  bottom: 45%;
}

<div>
  <img id="img1" src="http://americandreamreschool.com/map/Help/assets/images/simple.png">
  <img id="img2" src="https://image.flaticon.com/icons/png/128/149/149440.png" >
</div>

Как я могу убедиться, что изображение остается на той же оси Y относительно другого изображения при изменении размера окна?

Любая помощь приветствуется,

Спасибо

Answer 1

Позиционируйте маркер абсолютный, но он должен быть относительно родительского div

Затем соответственно откорректируйте свой процент маркера.

div {
  position: relative;
}

#img1 {
width:100%;
}

#img2 {
  width: 5%;
  position: absolute;
  left:52%;
  top:37%;
}

<div>
  <img id="img1" src="http://americandreamreschool.com/map/Help/assets/images/simple.png">
  <img id="img2" src="https://image.flaticon.com/icons/png/128/149/149440.png" >
</div>

Демонстрация Codepen

Аналогичная демонстрация