CSS：位置绝对无法调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3442943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: position absolute fails in resizing
提问by Karem
So, I have this image with CSS styling:
所以，我有这个带有 CSS 样式的图像：
.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.
问题是当我使用position: absolute;并调整浏览器大小时，它会改变位置。
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!
谢谢！
回答by Ventus
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:
具有绝对位置的项目应该在带有position:relative. 例如，您可以尝试将您的<a ..><img /></a>放入 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>Now it should stay at fixed position even if you resize your browser.
现在，即使您调整浏览器的大小，它也应该保持在固定位置。
回答by prodigitalson
Use position: fixed. But be aware fixedhas cross browser issues.
使用position: fixed. 但请注意fixed存在跨浏览器问题。
