React中Navbar组件与Introduction内容重叠问题求助

问题原因 #

使用position: fixed的元素会脱离文档流，不再占据页面空间，导致后续内容向上填充其原本位置，从而产生重叠。

修复步骤 #

1. 确保固定定位正确应用到导航栏容器 #

给App组件中的<header>标签添加App-header类，让固定定位样式生效：

function App() { 
  return (
    <div className='container'>
      <header className="App-header">
        <Navbar/>
      </header>
      <Introduction/>
    </div>
  );
}

2. 给固定导航栏设置明确高度并清除浮动 #

修改.App-header的CSS，添加高度并处理浮动带来的高度塌陷问题：

.App-header {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 80px; /* 根据导航栏内容调整合适高度 */
  overflow: hidden; /* 清除浮动影响，确保高度生效 */
}

3. 给内容组件添加上边距避开导航栏 #

给.Introduction添加等于或大于导航栏高度的上边距，让内容从导航栏下方开始显示：

.Introduction {
  padding-top: 80px; /* 与导航栏高度一致，可根据需求微调 */
}

4. 修正导航栏标题的padding写法 #

原代码中padding-top: 10px 0写法错误，改为正确的单值写法：

.NavTitle {
  color: #212427;
  float: left;
  padding-top: 10px;
  padding-left: 20px;
  font-weight: 200;
  font-size: 37.5px;
}

额外优化提示 #

• 如果导航栏高度不固定（比如响应式场景），可以用JavaScript动态计算导航栏高度，再设置内容的上边距。
• 避免在导航栏中使用float布局，改用Flexbox会更简洁且不易出现高度塌陷问题，例如：

.App-header {
  /* 保留原有固定定位、背景等样式 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

nav ul {
  display: flex;
  gap: 70px; /* 替代margin-left/right，布局更灵活 */
}

nav li {
  padding-top: 0; /* 不需要再用padding-top垂直居中，Flex的align-items已处理 */
}

内容的提问来源于stack exchange，提问作者Randolf Gabrielle Uy