固定导航栏遮挡Grid布局问题求解（Cargo Collective环境）

Fixed定位的导航栏会脱离文档流，不会占据页面空间，导致下方的Grid布局默认从页面顶部开始，进而被导航栏遮挡。以下是几种可行的解决方案：

方案一：固定高度外边距适配 #

如果导航栏是固定高度，直接给Grid容器设置与导航栏高度一致的margin-top：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 导航栏实际高度 */
  background: #ffffff;
}

.grid-container {
  margin-top: 80px; /* 与导航栏高度匹配 */
  display: grid;
  /* 你的Grid布局属性 */
}

方案二：CSS变量动态适配 #

如果导航栏高度可能变化（比如响应式场景），用CSS变量统一管理高度，便于维护：

:root {
  --navbar-height: 80px; /* 定义全局变量 */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: #ffffff;
}

.grid-container {
  margin-top: var(--navbar-height);
  display: grid;
}

方案三：内边距适配（适合带背景的Grid容器） #

如果Grid容器有背景色，用padding-top替代margin-top，避免容器上方出现空白背景：

.grid-container {
  padding-top: var(--navbar-height);
  display: grid;
  box-sizing: border-box; /* 确保内边距不会增加容器总宽度 */
}

方案四：响应式高度适配 #

如果导航栏使用相对单位（比如vh），用calc()计算间距：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh; /* 响应式高度 */
  background: #ffffff;
}

.grid-container {
  margin-top: calc(10vh);
  display: grid;
}

核心原理：通过给Grid容器添加与导航栏高度相等的间距，让Grid布局从导航栏底部位置开始渲染，避开固定定位的导航栏。

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