在div中覆蓋sidepanel，不是固定的

-3

在頁面上有一個容器（在它上面的標題，導航到左邊）。它包含一個網格。在網格選擇我想顯示一個側面板（在右側，顯示）。在div中覆蓋sidepanel，不是固定的

我不能使用固定位置 - 它應該在該容器內，並在滾動主體時滾動。它不能是絕對位置，因爲它會忽略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項目。

來源

2017-03-27 Agony

你應該對你的要求更加明確。 –

更明確如何？我指定它應該在flex容器內，覆蓋在頂部，而不是固定的，並與主體一起滾動。 – Agony

然後你應該發佈一個實現你所有需求的代碼。 –

通過在flex中使用relative和absolute的組合，我設法在容器內部添加邊欄並向右添加，並允許它在可見時覆蓋內容。

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; 
}

來源

2017-03-28 07:39:58 Agony

在div中覆蓋sidepanel，不是固定的

回答

相關問題