网站缩放时Logo偏移求助：如何固定Logo位置？

问题出在媒体查询中使用了固定像素值的margin调整位置，结合position: fixed时，固定像素会在页面缩放时失去相对比例，导致偏移。同时display: flex和align-items: center对背景图实现的logo没有作用，属于冗余代码。

修改后的CSS代码如下：

.logo {
  width: 80px;
  height: 40px;
  background-image: url('clarekicon3.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  left: 10px;
  top: 41px; 
}

@media (min-width: 900px) {
  .logo {
    background-image: url('clarkelogo2.svg');
    /* 替换固定margin为动态定位，避免缩放偏移 */
    top: 3px; /* 等价于原41px - 38px，直接设置top更直观 */
    left: calc(50% + 170px); /* 基于视口中心偏移，可根据需求调整数值 */
    /* 可选替代方案：用百分比或vw单位 */
    /* left: 75%; */
    /* left: 74vw; */
  }
}

关键修改说明： #

• 移除冗余的display: flex和align-items: center：背景图的居中已经由background-position: center实现，flex布局对当前场景无意义。
• 替换固定margin为动态定位参数：媒体查询中直接修改top和left，避免position: fixed与margin的布局冲突。
• 使用相对单位/动态计算值：calc()、百分比或vw（视口宽度单位）会随视口大小动态调整，页面缩放时能保持logo的相对固定位置。

如果需要logo固定在屏幕的某个绝对角落（比如右上角），可以直接设置right: 10px替代left，这样无论屏幕大小或缩放比例，都会紧贴右侧边缘。

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