CSS: absolute absolute error when resizing

Question

So, I have this image with CSS style:

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

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

Run codeHide result

The problem occurs when I use position: absolute;and resize my browser, it changes position.

Now you can say that since this is an absolute position and it follows the browser when resizing and the like, but how can I solve this so that it does not move?

Thank!

Answer 1

An element with an absolute position must be inside an element of block c position:relative. For example, you can try to put <a ..><img /></a>in <div>as follows:

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

Run codeHide result

, .

Answer 2

position: fixed. , fixed .