缩放或调整视口尺寸时元素移位，图片偏离指定位置问题求助

问题根因 #

红色容器.container通过margin: 2em auto 3em auto实现水平居中，它的左侧外边距会随页面宽度变化动态调整；但图片.image的margin-left: 13em是相对于页面视口左侧的固定值，二者的位置参考基准不一致，所以页面缩放时会出现相对偏移。

解决方案 #

方案1：新增共同居中父容器（推荐） #

给图片和红色容器套一个共同的居中父容器，让二者的位置都基于该父容器计算，保证缩放时相对位置不变。

对应CSS代码

/* 新增父容器样式 */
.wrapper {
  width: 50em;
  margin: 0 auto;
}
.container {
  background: red;
  width: 50em;
  height: 50em;
  /* 去掉左右auto，父容器已完成居中 */
  margin: 2em 0 3em 0;
  position: relative;
}
.image {
  width: 150px;
  display: block;
  /* 边距参考父容器，和容器位置绑定 */
  margin: 3em 0 0 13em;
}
.header {
  font-size: 3em;
  position: absolute;
  left: 6em;
  top: 1em;
}

对应HTML代码

<div class="wrapper">
  <img class="image" src="https://i.imgur.com/zKdvwvz.jpg" alt="" />
  <div class="container">
    <h2 class="header">Hello</h2>
  </div>
</div>

方案2：图片移入容器内部（无需额外DOM） #

将图片放到.container内部，通过绝对定位的负偏移值固定在容器上方，直接以容器作为位置参考基准。

对应CSS代码

.container {
  background: red;
  width: 50em;
  height: 50em;
  /* 上方margin预留图片高度+原有间距 */
  margin: calc(3em + 150px) auto 3em auto;
  position: relative;
}
.image {
  width: 150px;
  position: absolute;
  left: 13em;
  /* 向上偏移到容器外部 */
  top: calc(-3em - 150px);
}
.header {
  font-size: 3em;
  position: absolute;
  left: 6em;
  top: 1em;
}

对应HTML代码

<div class="container">
  <img class="image" src="https://i.imgur.com/zKdvwvz.jpg" alt="" />
  <h2 class="header">Hello</h2>
</div>

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