在 div 内覆盖侧面板，不固定答案

【问题标题】：Overlay sidepanel inside div, not fixed在 div 内覆盖侧面板，不固定
【发布时间】：2017-08-20 02:39:39
【问题描述】：

页面上有一个容器（其上方的标题，左侧导航）。它包含一个网格。在选择网格时，我想显示一个侧面板（在右侧显示）。

我不能使用固定位置 - 它应该在该容器内并在滚动正文时滚动。它不能是绝对位置，因为它会忽略 flexbox 高度并且不会增长以适应页面并且会破坏响应高度。侧面板应覆盖在网格顶部，而不是在出现网格时将其推到一边。

面板将具有大致相似的布局（flexbox）：

<div class="content-panel-wrapper">
    <div class="header"></div>
    <div class="vehicle-grid-container"></div>
</div>
<div class="magical-sidebar"></div>

没有 jQuery。这是一个纯粹的 Angular 4 项目。

【问题讨论】：

您应该更明确地提出您的要求。
如何更明确？我指定它应该在 flex 容器内，覆盖在顶部，而不是固定并随 body 滚动。
那么你应该发布一个实现你所有要求的代码。

标签： html css angular

【解决方案1】：

通过将相对和绝对与 flex 结合使用，我设法在容器内和右侧添加侧边栏，并允许它在可见时覆盖内容。

html:

<div class="main-wrapper">
    <div class="content-panel-wrapper"></div>
    <ng-sidebar-container>
        <ng-sidebar>
        </ng-sidebar>
    </ng-sidebar-container>
</div>

css:

.main-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: 100%;
    position: relative;
}
ng-sidebar-container {
    height: 100%;
    right: 0;
    display: block;
    position: relative;
}
.ng-sidebar {
    position: absolute;
}

【讨论】：