CSS: абсолютная позиция не изменяется

Question

Итак, у меня есть это изображение со стилем CSS:

.city1 {
  position: absolute;
  /* float: left; */
  top: 34px;
  left: 170px;
}

<a href="malmo/">
  <img class="city1" src="images/city.png" alt="Malmö">
</a>

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

Теперь вы можете сказать, что это потому, чтоэто абсолютная позиция, и она следует за браузером, когда вы изменяете размер и тому подобное, но как мне решить это, чтобы он не двигался?

Спасибо!

Answer 1

Элемент с абсолютной позицией должен находиться внутри элемента блока с position:relative.Например, вы можете попытаться поместить ваш <a ..><img /></a> в <div> как:

#cont {
  position: relative;
  width: 600px;
  height: 600px;
}
#cont a {
  position: absolute;
  top: 34px;
  left: 170px;
}

<div id="cont">
  <a href="malmo/">
    <img class="city1" src="images/city.png" alt="Malmö">
  </a>
</div>

Теперь он должен оставаться в фиксированном положении, даже если вы изменили размер браузера.

Answer 2

Используйте position: fixed.Но имейте в виду, что fixed имеет кросс-браузерные проблемы.