CSS divの位置の動作

Question

私はdivの位置（相対、絶対、固定）のプロパティを理解することに問題があります。私は基本的に絶対divを中心にしています。 div内では、垂直方向と水平方向にスクロールすることができます。このdivの内側には、スクリーン（オーバーフロー）よりも広い幅の固定ヘッダーと垂直方向と水平方向のオーバーフローを持つコンテンツdivが必要です。ここで

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #fff; 
 
    margin: 0px auto; 
 
    padding: 0px auto; 
 
    position: fixed; 
 
} 
 

 
.container { 
 
    width: calc(100% - 20px); 
 
    height: calc(100% - 20px); 
 
    top: 10px; 
 
    left: 10px; 
 
    background: #2924aa; 
 
    overflow: scroll; 
 
    display: flex; 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.container-header { 
 
    width: calc(100%); 
 
    height: calc(10%); 
 
    background: #2924aa; 
 
    overflow: visible; 
 
    z-index: 10; 
 
    position: fixed; 
 
    background: red; 
 
} 
 

 
.container-body { 
 
    width: calc(110%); 
 
    height: calc(110%); 
 
    background: #2924aa; 
 
    overflow: auto; 
 
    position: absolute; 
 
    background: green; 
 
}

<div class="container"> 
 
     
 
    <div class="container-header"></div> 
 
     
 
    <div class="container-body"></div> 
 
     
 
    </div>

は私plunkerです： https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy

Answer 1

だから私はあなたが持っている主な問題は、CSS3で位置属性に関してであると思います。以下に各可能な値の簡単な概要を示します。

CSS配置
位置のCSS位置決め属性には4つの異なる値があります。
スタティック - スタティックはpositionのデフォルト値です。ページ上の要素をその位置に保持し、スクロールするときにページをスクロールします。
相対 - 相対的な配置は、静的とほぼ同じです。しかし、あなたは元の位置に要素の配置相対を変更するために、は左右、トップ、および下属性を使用することができます。
固定 - 固定要素の位置はビューポート（ブラウザ）との関係にあるため、固定位置の要素はページをスクロールしません。ビューポートをスクロールしても変更されないためです。ただし、ブラウザのサイズを変更すると、要素の位置が変更されます。
絶対 - 絶対位置を持つ要素は、その親要素（つまり、それを含む要素）に対して相対的に配置されます。

いくつかの図を含む詳細情報は、hereを参照してください。