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; when i resize my browser it changes the position. You may now say thats because its a absolute position and it follows the browser when you resize and such, but how do i solve this, so it doesnt move? thank you!

Answer 1

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

Answer 2

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

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

with style:

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

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