固定导航栏遮挡内容，h1元素无法下移问题求助

嘿，我来帮你搞定这个fixed导航栏遮挡内容的困扰！其实这个问题和z-index关系不大，核心是要给页面内容留出导航栏占据的顶部空间，下面给你几个实用的解决方案：

方法一：给body添加顶部内边距（最常用） #

这是最简单直接的办法，给<body>设置和导航栏高度一致的padding-top，把整个页面内容往下推：

/* 你的固定导航栏样式 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 替换成你导航栏的实际高度 */
  background-color: #fff;
}

/* 给body添加顶部内边距 */
body {
  padding-top: 80px; /* 和导航栏高度保持一致 */
  margin: 0; /* 清除body默认外边距，避免多余间距 */
}

方法二：给页面首个元素（比如h1）添加顶部外边距 #

如果不想调整整个body的内边距，也可以直接给页面最上方的元素（比如你的<h1>）设置margin-top：

h1 {
  margin-top: 90px; /* 可以比导航栏高度稍大一点，留出呼吸感 */
}

注意：如果导航栏高度是动态变化的（比如响应式场景下高度改变），这个方法可能需要配合JS动态计算高度来调整margin值。

方法三：使用CSS变量统一管理高度（进阶技巧） #

如果你的项目需要频繁调整导航栏高度，用CSS变量可以让维护更方便：

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

/* 导航栏使用变量 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background-color: #fff;
}

/* 内容容器使用变量 */
body {
  padding-top: var(--navbar-height);
  margin: 0;
}

为什么之前的z-index没用？因为z-index是用来控制元素的堆叠层级（比如让导航栏显示在其他元素上方），而你现在的问题是内容被导航栏的固定位置覆盖，本质是内容没有避开导航栏占据的空间，所以调整z-index自然看不到效果啦~

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