Warum ist eine feste Position meine Ausrichtung zu vermasseln?

Ich versuche, den Header still zu halten und den Rest des Inhalts darunter zu scrollen. Ich bin in der Lage, dies zu erreichen, aber wenn ich eine feste Position auf meinen zwei Header divs den Ausbruch aus dem Rand Auto.Warum ist eine feste Position meine Ausrichtung zu vermasseln?

css:

.structure { 
    width:960px; 
    padding:20px; 
    margin:0px auto 0px auto; 
    background:#121212; 
    border-left:5px #F06BA8 solid; 
    border-right:5px #F06BA8 solid; 
} 
.header_home_structure { 
    width:960px; 
    margin:0px auto 0px auto; 
    position:fixed; 
    height:80px; 
} 
.header_home_bg { 
    width:100%; 
    background:#121212; 
    border-bottom:3px #F06BA8 solid; 
    height:80px; 
    position:fixed; 
}

html:

<body> 
    <div class="header_home_bg clearfix"> 
     <div class="header_home_structure clearfix"> 
      </div> 
     </div> 
    <div class="structure clearfix"> 
    </div> 
</body>

Quelle

2012-12-19 LightningWrist

Gerade position: fixed auf dem div-Container verwenden, tun Sie es nicht zweimal verwenden

Demo

.structure { 
    width:960px; 
    padding:20px; 
    margin:0px auto 0px auto; 
    background:#121212; 
    border-left:5px #F06BA8 solid; 
    border-right:5px #F06BA8 solid; 
} 
.header_home_structure { 
    width:960px; 
    margin:0px auto 0px auto; 
    height:80px; 
} 
.header_home_bg { 
    width:100%; 
    background:#121212; 
    border-bottom:3px #F06BA8 solid; 
    height:80px; 
    position:fixed; 
}

Quelle

2012-12-19 06:06:56

Er wird probab lch möchte auch margin-top hinzufügen: 80px zu .structure, so dass der feste Header nicht überlagert ist. –

@ChrisHerbert ya erwarte ich so viel von ihm .. als auch ein guter Punkt, außerdem verstehe ich nicht, wie ein festes div sein Layout brechen kann –

padding-top: 80 hat perfekt funktioniert. – LightningWrist

Warum ist eine feste Position meine Ausrichtung zu vermasseln?

Antwort

Verwandte Themen