向div添加header导致其下移约500px，大分辨率下如何解决？

看起来你遇到的是负z-index结合inline-block布局，加上子元素默认外边距导致的大分辨率布局偏移问题，咱们一步步拆解解决：

问题根源 #

1. 负z-index的层级干扰：你的.svg-wrapper设置了z-index: -99，这会让它处于当前页面堆叠上下文的最底层，甚至可能被body或其他上层元素的布局“挤压”。大分辨率下页面空间充足，这种层级异常会和子元素的margin产生叠加效应，直接导致整个div大幅下移；小分辨率下页面布局紧凑，这个问题被空间限制掩盖了。
2. h1默认margin的“逃逸”：h1标签自带默认的margin-top，而inline-block元素不会像block元素那样触发margin塌陷（即子元素margin会被父元素包含），所以h1的margin会直接作用在.svg-wrapper外部，进一步放大了偏移问题。

具体解决方案 #

你可以根据自身布局需求选择以下任意一种方案：

方案1：移除负z-index（最推荐） #

如果你的布局不需要把这个div放在最底层，直接删掉z-index: -99，这能从根源上解决层级带来的异常：

.svg-wrapper {
  width: 300px;
  height: 400px;
  background-color: white;
  margin: 25px 25px 120px 25px;
  display: inline-block;
  position: relative;
  /* 移除z-index: -99 */
}

方案2：清除h1的默认margin #

给h1设置margin-top: 0，阻止margin逃逸到父元素外：

.svg-wrapper h1 {
  margin-top: 0;
}

方案3：给父元素创建独立堆叠上下文并包含margin #

如果必须保留负z-index，给.svg-wrapper添加overflow: hidden，既能包含子元素的margin，又能创建独立的堆叠上下文，避免全局层级干扰：

.svg-wrapper {
  width: 300px;
  height: 400px;
  background-color: white;
  margin: 25px 25px 120px 25px;
  display: inline-block;
  position: relative;
  z-index: -99;
  overflow: hidden; /* 添加这行 */
}

方案4：改用flex布局（多元素并排场景） #

如果需要多个.svg-wrapper并排展示，用flex布局代替inline-block，能更精准地控制间距和子元素布局：

/* 给父容器添加flex布局 */
.svg-container {
  display: flex;
  gap: 25px; /* 替代inline-block的margin间距 */
  padding: 25px 0;
}
.svg-wrapper {
  width: 300px;
  height: 400px;
  background-color: white;
  margin-bottom: 120px;
  position: relative;
  z-index: -99;
}

对应的HTML结构调整为：

<div class="svg-container">
  <div class="svg-wrapper">
    <h1>Hello</h1>
    <div class="caption">
      <h2>Day 1</h2>
    </div>
  </div>
  <!-- 其他.svg-wrapper元素 -->
</div>

优先试试方案1，负z-index通常是这类布局异常的导火索；如果确实需要保留层级设置，再用方案3来修复。

内容的提问来源于stack exchange，提问作者Eddie Taliaferro II