Ich habe Probleme mit dem Verständnis der div Position (relative, absolute, feste) Eigenschaften. Ich habe grundsätzlich eine absolute div zentriert. Innerhalb der div sollte es möglich sein, vertikal und horizontal zu scrollen. Innerhalb dieses div sollte ein fester Header mit einer Breite größer als Bildschirm (Überlauf) und ein Content-Div, das einen Überlauf vertikal und horizontal hat.CSS Div Position Verhalten
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>
Hier ist mein Plunker: https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
Ihr Hauptcontainer sollte "position: relative" haben, sonst wird ".continer-body" relativ zu Ihrem Browser-Bildschirm berechnet. Fixed wird immer in Bezug auf den Bildschirm berechnet. –