求助：如何实现中间Flex内容上下重叠布局？CSS Calc/Flexbox问题

核心问题 #

你用position: relative让mainContainer上移100px，但相对定位元素的原始占位空间不会消失，上下两个section仍然占据原来的位置，所以中间内容无法真正重叠覆盖它们。另外calc(100% - 200px)的高度计算可能因为父元素未明确设置高度而失效。

解决步骤 #

假设你的HTML结构是：

<section class="top-section"></section>
<section class="middle-section">
  <div class="mainContainer"></div>
</section>
<section class="bottom-section"></section>

1. 给父容器设置基准高度
   先给包裹三个section的容器（比如body或外层div）设置高度，确保百分比高度有参考：

   body {
     margin: 0;
     min-height: 100vh;
   }
   

2. 调整中间section的布局，实现重叠
   放弃相对定位，改用负margin让中间section上下延伸，覆盖上下section：

   .top-section, .bottom-section {
     height: 100px; /* 上下section的固定高度，可根据需求调整 */
     background: #eee;
   }
   
   .middle-section {
     margin-top: -100px; /* 向上偏移，覆盖top-section */
     margin-bottom: -100px; /* 向下偏移，覆盖bottom-section */
     z-index: 1; /* 确保中间内容在上下section之上 */
     position: relative; /* 配合z-index生效 */
   }
   
   .mainContainer {
     display: flex;
     min-height: 100vh; /* 让中间容器占满视口高度，配合负margin实现重叠 */
     align-items: center;
     justify-content: center;
     background: #fff;
     box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 可选，增强视觉层次 */
   }
   

3. 如果需要中间内容部分重叠
   若不需要完全覆盖上下section，只需部分重叠，可调整负margin的值（比如-50px），同时调整mainContainer的高度：

   .middle-section {
     margin-top: -50px;
     margin-bottom: -50px;
   }
   
   .mainContainer {
     min-height: calc(100vh - 100px); /* 减去上下各50px的重叠高度 */
   }
   

关键要点 #

• 避免用相对定位做重叠：相对定位仅改变视觉位置，不释放原始占位空间，无法实现真正的覆盖。
• 负margin是实现块级元素重叠的常用方法，配合z-index控制层级。
• 确保百分比高度的父元素有明确高度值（如100vh），否则calc计算会失效。

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