CSS 侧边栏重叠容器内容

Question

我现在正在为我的应用程序制作仪表板，但我的布局结构遇到了一些问题。

我希望容器内的内容嵌套在侧边栏和导航栏之间。我为此使用 Bootstrap 以及一组自定义样式。

这是侧边栏的 HTML:

<div class="fixed-sidebar fixed-sidebar-light">
    ...
</div>

这是侧边栏的 CSS:

.fixed-sidebar {
    position: fixed;
    z-index: 22;
    width: 270px;
    min-height: 1000vh;
    box-shadow: 0 0 34px 0 rgba(63, 66, 87, 0.1);
}

这是 header 的 HTML:

<header class="header" id="site-header">
...
</header>

这是标题的 CSS:

height: 70px;
background-color: #3f4257;
padding-right: 70px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 21;

为什么容器内容仍然会被推到那个组件所在的右边？

这是一个包含所有代码的代码笔。

https://codepen.io/teecp/pen/zyOpvd

Answer 1

您的侧边栏固定位置意味着它不再与 DOM 中的其余标题和容器内嵌。看起来你的内容容器没有在较大的断点处与侧边栏发生冲突，因为容器的最大宽度为 1300px 和 margin: 0 auto，在两端留下足够的自动边距容器不与侧边栏“碰撞”。

对此(我不完全同意该结构)的修补程序将是以下调整:

CSS

.container-sidebar {
  margin-left: 270px; 
}

HTML

<div class="container-sidebar">
  <div class="container">
    <!-- content or markup here -->
  </div>
</div>

在我看来，边栏应该被最小化以允许最大的屏幕空间——所以在这种特殊情况下，边栏应该滑入和滑出页面的左侧。拥有此 UI 会改变您的标记顺序，但提前考虑，也许这就是您想要的。