调整浏览器窗口大小时部分div异常移动是什么原因？

问题原因 #

所有元素的定位都基于父级.wrapper，你未给.wrapper设置固定宽度，它默认会跟随浏览器视口宽度变化，不同元素的偏移属性参考的基准边不同，因此出现位置变化不一致的情况：

• .nav使用left: 670px，相对于.wrapper左侧边缘偏移固定像素值，视口宽度变化时.wrapper左边缘始终对齐视口左边缘，所以.nav的水平位置看起来几乎不动。
• .logo使用right: 15%，百分比偏移是相对于父级.wrapper的宽度计算的，视口宽度变化时这个偏移的实际像素值会同步变动，因此logo会左右移动。
• .undertitel使用right: 630px，相对于.wrapper右侧边缘偏移固定像素值，视口宽度变化时.wrapper右边缘对齐视口右边缘，因此undertitel会跟随视口右边缘同步移动。
• .bakgrund没有设置任何偏移属性，默认停靠在.wrapper的左上角，它本身宽度为1400px，当视口宽度小于1400px时，视口右边缘会覆盖它的右侧部分，视觉上就像是它跟着窗口变小向左移动了。

修复方案 #

如果希望所有元素相对固定，不随窗口大小移动，直接给父级.wrapper设置和背景尺寸匹配的固定宽高即可：

.wrapper {
  position: relative;
  width: 1400px;
  height: 1400px;
  /* 宽屏下想要内容居中可以额外加下面这行 */
  /* margin: 0 auto; */
}

如果需要适配不同窗口大小的响应式布局，不建议用固定像素的绝对定位来布局导航、标题这类内容，可以改用flex、grid等流式布局方案，或者统一使用百分比、vw/vh这类相对单位做偏移设置。

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