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存在跨浏览器问题。