页面缩放调宽时HTML header上移无法固定的问题解决

布局错位是固定值负margin+自适应尺寸图片的组合bug导致的：

• 你代码里的<img>标签没有加尺寸约束，浏览器窗口宽度增大时，图片会按原始宽高比自动缩放，高度会随宽度同步增加
• 给.header-container-1设置的margin-top: -35rem是写死的固定偏移值，不会跟着图片高度变化自动调整，自然会出现窗口越宽、header向上偏移越多的问题。
  靠大数值负margin把元素硬拽到其他元素上方的写法本身就不稳定，只要相邻元素尺寸发生变化，布局就会错位。

放弃硬编码负margin的实现，改用「相对定位+绝对定位」的叠层布局方案，不管窗口尺寸怎么变，header都会固定在图片区域的对应位置，不会出现偏移：

• 新增一个外层容器包裹图片和header模块，给容器加相对定位，作为内部绝对定位元素的参考基准
• 图片设置宽度100%撑满容器，高度自适应，保证原始显示比例不变
• 给header外层容器加绝对定位，通过top属性控制上下位置，直接删掉原来写死的负margin

修复后完整代码 #

/* 新增banner容器，作为定位基准 */
.banner-wrap {
  position: relative;
  width: 100%;
}
/* 图片自适应容器宽度，保持比例 */
#image {
  width: 100%;
  display: block;
}
.header-container {
  display: block;
  margin: 0 auto;
  padding-bottom: 5rem;
  width: 70%;
}
/* 移除固定负margin，改为绝对定位固定位置 */
.header-container-1 {
  position: absolute;
  top: 10%; /* 可根据实际显示需求调整数值，数值越大header位置越靠下 */
  left: 0;
  width: 100%;
}

<div class="banner-wrap">
  <img id="image" src="https://www.champneys.com/getattachment/0b7088bf-e999-4304-91e6-77e6330760bc/champneys-facials.jpg?lang=en-gb&ext=.jpg" alt="Image cannot be displayed">
  <div class="header-container-1">
    <div class="header-container">
      <h3 class="first-h3">
        Look & Feel Better
      </h3>
      <h1 class="business-name">
        PASSIONATE HEALING
      </h1>
      <h2 class="first-h2">
        Out With the Old
        <br> In With the New
      </h2>
    </div>
  </div>
</div>

• 如果你的需求是让header固定在浏览器视口顶部、不随页面滚动移动，直接给header外层容器添加position: fixed; top: 0; left: 0; width: 100%; z-index: 999;即可，注意要给页面主体内容添加对应高度的上内边距，避免页面开头的内容被固定header遮挡。
• 日常写布局尽量避免用超过1rem的固定负margin做跨元素位置调整，这类写法的响应式容错性极差，窗口尺寸、字体大小、内容长度变化都可能直接打乱布局。

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