私はdivの位置(相対、絶対、固定)のプロパティを理解することに問題があります。私は基本的に絶対divを中心にしています。 div内では、垂直方向と水平方向にスクロールすることができます。このdivの内側には、スクリーン(オーバーフロー)よりも広い幅の固定ヘッダーと垂直方向と水平方向のオーバーフローを持つコンテンツdivが必要です。ここでCSS 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
あなたのメインコンテナには 'position:relative;'がなければなりません。 '.continer-body'はブラウザ画面に対して相対的に計算されます。固定は常に画面に関して計算されます。 –