2016-05-20 21 views
0

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

+0

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. –

Antwort

0

Also ich denke, die wichtigste Frage, die Sie in Bezug auf die Position Attribut in CSS3 haben ist. Im Folgenden finden Sie eine kurze Zusammenfassung aller möglichen Werte.

CSS Positionierung
Das Attribut Positionierung CSS von Position hat vier verschiedene Werte.
Statisch - Statisch ist der Standardwert für die Position. Es behält das Element auf der Seite an seiner Stelle und scrollt beim Blättern die Seite nach oben.
Relative - Relative Positionierung ist so ziemlich wie statisch; Sie können jedoch die verwenden links, rechts, oben und Boden Attribute die Platzierung des Elements relativ in seine ursprüngliche Position zu ändern.
Fixed - Die Position eines festen Elements bezieht sich auf das Ansichtsfenster (d. H. Den Browser). Daher wird bei einem Element mit fester Position nicht mit der Seite geblättert, da sich beim Blättern das Ansichtsfenster nicht ändert. Wenn Sie jedoch die Größe des Browsers ändern, ändert das Element seine Position.
Absolut - Ein Element mit einer absoluten Position wird relativ zu seinem übergeordneten Element positioniert (d. H. Dem Element, das es enthält).

Eine gute Quelle für weitere Informationen, einschließlich einiger Diagramme finden Sie here.