如何防止窗口缩放时flex布局相对定位元素发生异常位移

在包含标题与导航栏的header元素和"关于"板块之间预留了间距，但调整窗口尺寸时，即便元素之间仍存在空余空间，"关于"板块依然会出现位移。

问题复现代码 #

HTML代码 #

<body style="background-image: url(#); background-color: #a6afbe;">
    <header>
        <h1>Haruhi Suzumiya 3D School</h1>
        <nav>
            <ul class="nav-list">
                <li><a class="noselect" href="#">Home</a></li>
                <li><a class="noselect" href="#">About</a></li>
                <li><a class="noselect" href="#">Pictures</a></li>
                <li><a class="noselect" href="#">Contact</a></li>
                <li><a class="noselect" href="#"></a></li>
            </ul>
        </nav>
    </header>

    <div class="flexcontainer" style="top: 30rem">
        <section>
            <h2>About</h2>
            <article>
                <p class="main">
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS样式 #

.flexcontainer {
  top: inherit;
  display: -webkit-flex;
  display: flex;
  position:relative; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  
}

header {
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
}

故障原因 #

位移的核心原因是定位属性使用错误：

• 当前.flexcontainer设置为position: relative，配合top: 30rem做偏移。相对定位的元素不会脱离正常文档流，top属性仅做视觉位置偏移，元素在文档流中占据的原始位置仍然紧贴header底部。
• 窗口尺寸缩小时，header内的标题、导航项会发生折行，header自身高度被撑大，会把flexcontainer在文档流中的原始位置向下推，最终导致视觉上的板块位移。

修复方案 #

• 优先使用外边距控制间距：删除flexcontainer上内联的style="top: 30rem"，以及CSS规则里的top: inherit，改用margin-top控制和header的间距。外边距基于文档流的实际位置计算，会自动适配header的高度变化，不会出现错位。
  修正后的flexcontainer样式：

  .flexcontainer {
    display: -webkit-flex;
    display: flex;
    position: relative; 
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    margin-top: 30rem;
  }
  

• 若必须使用偏移属性定位：将.flexcontainer的position改为absolute，同时给body设置position: relative，让板块相对于页面根容器定位，完全脱离文档流，就不会被header高度变化影响。该方案需要额外处理后续元素的位置，避免被绝对定位的板块遮挡，非必要不推荐。

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