CSS: position absolute fails in resizing

问题

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!

回答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.

回答2:

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

来源：https://stackoverflow.com/questions/3442943/css-position-absolute-fails-in-resizing