CSS固定导航栏内容重叠问题求助：我的代码哪里出错了？

• 问题根源：position: fixed 会让导航栏脱离正常文档流，不再占据页面空间，下方内容会自动填充原本导航栏的位置，自然就重叠了。
• 快速解决：给页面的主内容容器（比如<main>或者自定义的.content类容器）加个和导航栏高度一致的内边距或外边距。
  举个实际代码例子：
  假设导航栏高度是80px，CSS这么写：

  .main-content {
    padding-top: 80px; /* 用margin-top也能达到效果 */
  }
  

• 适配动态高度的情况：如果导航栏高度会随窗口大小变化（比如响应式布局），用JS动态计算高度更靠谱：

  const navbar = document.querySelector('.navbar');
  const mainContent = document.querySelector('.main-content');
  // 初始化设置间距
  mainContent.style.paddingTop = `${navbar.offsetHeight}px`;
  // 窗口大小改变时重新计算
  window.addEventListener('resize', () => {
    mainContent.style.paddingTop = `${navbar.offsetHeight}px`;
  });
  

• 小细节：如果导航栏有边框或内边距，用offsetHeight（包含高度、内边距、边框）比clientHeight更准确，能保证间距刚好避开导航栏。

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