网页图片固定定位咨询：页面缩放时图片偏移的解决方法

先说说为什么第一段代码会出现缩放偏移哈：

• 你写的#top-left用的是CSS默认的静态定位（static），这种定位的元素属于文档流的一部分，页面缩放时，元素会跟着文档流的布局一起调整位置，自然就会偏移。

而你第二段的#top-left2用position:absolute生效，是因为绝对定位让元素脱离了文档流，它会相对于最近的设置了非static定位的父元素（如果没有的话，就默认相对于浏览器视口）来定位。不过如果想要完全不受页面缩放影响，还有几个优化方向可以参考：

1. 绑定到居中背景的容器上 #

既然你的背景始终是居中的，那可以给背景所在的容器设置position:relative，让图片的绝对定位参考这个容器，这样不管页面怎么缩放，图片都会和背景保持相对固定的位置：

/* 假设你的居中背景容器是这个类 */
.page-container {
  width: 1200px; /* 替换成你背景的实际宽度 */
  margin: 0 auto; /* 实现居中 */
  position: relative; /* 作为图片定位的参考基准 */
}

#top-left2 {
  width:200px;
  height:200px;
  position:absolute;
  left:464px; /* 相对于.page-container左侧的距离 */
  top:354px; /* 相对于.page-container顶部的距离 */
  border-right: thick hotpink solid;
  border-bottom: thick hotpink solid;
}

2. 用相对单位适配缩放（可选） #

如果不想用固定的像素值，也可以换成百分比单位，这样图片的位置会随着容器的缩放自动按比例调整，始终保持和背景的相对位置：

#top-left2 {
  width: 16.67%; /* 200px / 容器宽度1200px 计算得来 */
  height: 16.67%;
  position:absolute;
  left: 38.67%; /* 464px / 1200px */
  top: 29.5%; /* 354px / 1200px */
  border-right: thick hotpink solid;
  border-bottom: thick hotpink solid;
}

3. 固定在浏览器视口（如果需要） #

如果你的图片是要固定在浏览器窗口的某个位置，不管页面怎么滚动或缩放都不动，那直接用position:fixed就可以，它是完全基于视口来定位的：

#top-left2 {
  width:200px;
  height:200px;
  position:fixed;
  left:464px;
  top:354px;
  border-right: thick hotpink solid;
  border-bottom: thick hotpink solid;
}

总的来说，你最开始用绝对定位的思路是完全正确的，只要把定位的参考对象捋清楚，或者根据需求选择fixed定位，就能让图片在页面缩放时稳稳待在你想要的位置啦。

内容的提问来源于stack exchange，提问作者Mohammed Danyal