如何用纯CSS实现侧边栏固定左侧且内容对齐

我明白你的困扰：用position:fixed让侧边栏固定时，内容被挡住；换成float:left虽然内容显示正常，但滚动时侧边栏没法固定。其实问题出在fixed定位的元素会脱离文档流，后面的内容不会自动为它留出空间，所以才会被遮挡。下面给你具体的解决步骤：

步骤1：包裹主内容区域 #

首先在App.js里，把除了侧边栏之外的内容（Topbar和文本）放进一个单独的容器里，这样我们可以单独控制它的外边距：

function App() {
  return (
    <div className="App">
      <Navbar />
      {/* 新增主内容容器 */}
      <div className="main-content">
        <Topbar />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
           no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  );
}

步骤2：调整CSS，给主内容留出空间 #

接下来修改你的CSS，给主内容容器设置左侧外边距，刚好等于侧边栏的初始宽度；同时在侧边栏hover展开时，同步调整主内容的外边距，避免再次被遮挡：

/* 给主内容容器添加左侧外边距 */
.main-content {
  margin-left: 5%;
  transition: margin-left 0.3s ease; /* 可选：让宽度变化时过渡更平滑 */
}

/* 侧边栏hover时，同步扩展主内容的左侧外边距 */
.Navbar:hover ~ .main-content {
  margin-left: 12rem;
}

/* 可选：确保侧边栏始终在内容上方 */
.Navbar {
  width: 5%;
  height: 100vh;
  background-color: var(--bg-primary);
  position: fixed;
  z-index: 100; /* 防止内容覆盖侧边栏 */
}

为什么这样有效？ #

• position:fixed让侧边栏固定在视口左侧，不会随滚动移动，但它脱离了文档流，所以主内容需要手动设置margin-left来避开它的位置。
• 当侧边栏hover展开宽度到12rem时，通过兄弟选择器~让主内容的margin-left同步更新，保证内容始终不会被侧边栏遮挡。
• 加上transition属性可以让宽度变化的过程更流畅，提升用户体验。

这样修改后，你就能同时拥有固定的侧边栏，以及正常显示且不会被遮挡的主内容啦～

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