使用position:fixed设置侧边导航栏时与其他HTML元素重叠如何解决

position: fixed 属于脱离正常文档流的定位方式，渲染时不会在常规文档流中占据物理空间，因此后续正常排布的元素会默认从页面左上角开始渲染，自然会与固定定位的侧边栏发生重叠。

• 方案1：给主内容容器添加和侧边栏宽度一致的左侧外边距/内边距（最常用）
  你只需要确保侧边栏的宽度和主内容区的左边距数值完全匹配即可，代码示例如下：

  /* 侧边栏样式 */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px; /* 侧边栏宽度可自行调整 */
    height: 100vh;
  }
  /* 主内容容器样式 */
  .main-content {
    margin-left: 250px; /* 数值与侧边栏宽度保持一致即可 */
  }
  

• 方案2：配合CSS变量适配响应式场景
  如果你的页面需要适配小屏侧边栏折叠的交互，可以用CSS变量统一定义侧边栏宽度，避免多场景下重复修改数值：

  /* 全局定义侧边栏宽度变量 */
  :root {
    --sidebar-width: 250px;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    transition: all 0.3s;
  }
  .main-content {
    margin-left: var(--sidebar-width);
    transition: all 0.3s;
  }
  /* 小屏下侧边栏折叠 */
  @media (max-width: 768px) {
    :root {
      --sidebar-width: 0;
    }
  }
  

如果侧边栏顶部还有固定定位的顶部导航栏，主内容区还需要同步添加对应高度的上外边距/内边距，避免和顶部导航重叠。

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