设置position:relative偏移导航栏后header下方间隙如何消除

问题原因 #

position: relative 仅改变元素的视觉显示位置，不会改变元素在正常文档流中占据的空间大小。你给#navigation设置top: -65px向上偏移后，它原本在文档流里占的130px高度依然会被header计算在内，所以header底部会多出65px的空白，导致和下方section出现间隙。

最优解决方案（改动最小） #

只需要给#navigation添加一行margin-bottom: -65px，抵消导航向上偏移后多出来的占位高度即可，修改后的代码如下：

#navigation {
  width: 450px;
  height: 130px;
  display: flex;
  position: relative;
  top: -65px;
  margin-bottom: -65px; /* 新增该行 */
}

原理：负的底部margin会让元素的下方文档流内容向上移动对应距离，刚好填补导航偏移后留下的65px空白，header高度会自动收缩，和下方section无缝衔接。

可选方案：用absolute定位实现 #

如果你需要导航完全不占用header的高度空间，也可以用绝对定位实现，改动如下：

1. 给header添加相对定位，作为导航的定位父级：

header {
  flex-direction: column;
  align-items: center;
  position: relative; /* 新增该行 */
}

2. 修改#navigation的定位规则：

#navigation {
  width: 450px;
  height: 130px;
  display: flex;
  position: absolute;
  bottom: -65px; /* 相对于header底部向上偏移65px，效果和原写法一致 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中导航 */
  /* 删除原来的 top: -65px 规则 */
}

原理：设置为position: absolute的元素会脱离正常文档流，header计算高度时完全不会考虑导航的尺寸，自然不会出现多余空白。

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