CSS: position absolute fails in resizing

Question

So, I have this image with CSS styling:

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

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

Issue is when I use the position: absolute; and I resize my browser, it changes the position.

You may now say that's because it's a absolute position and it follows the browser when you resize and such, but how do I solve this so it doesn't move?

Thank you!

Answer 1

Item with absolute position should be inside a block element with position:relative. For example you can try to put your <a ..><img /></a> in a <div> as such:

#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>

Now it should stay at fixed position even if you resize your browser.

Answer 2

Use position: fixed. But be aware fixed has cross browser issues.