html - CSS图像在调整大小时移动

Question

调整浏览器窗口大小后，图像正在移动。不知道为什么。谁能解释为什么？

#me img {
height: 200px;
width: 200px;
border-radius: 50%;
left: 850px;
position: absolute;
}

Answer 1

这是因为img绝对位于850px左侧。因此，当调整窗口大小时，它总是在同一个位置，因为它是一个设定px值。设置一个%基础值会改变它，img因为它是基于父级的百分比 - 在这种情况下是主体，它是正在调整大小的窗口。

看看删除定位后会发生什么：http: //jsfiddle.net/JoshC/6jH9x/

如果一定要绝对定位，应该考虑加到position:relative父级，让子级相对于父级绝对定位。