Position relativ aber fester Header

Question

Ich brauche wie hier folgende Header in der relativen Position haben:

Aber ich mag, dass die Header festgelegt werden, wenn der Inhalt Scrollen, so habe ich versucht, `position: fixed.

Das Problem ist jetzt, dass es so aussieht:

jemand eine Idee Hat?

Answer 1

Wenn die Höhe Ihr topbar die bekannt ist, um Ihre Inhalte, sehen die gleiche Breite wie Spitzenposition fügen Sie die Geige am Code oder überprüfen:

<div class ="topbar"> 

</div> 
<div class="content"> 
<p>first line</p> 
<p>abc</p> 
<p>abc</p> 
. 
. 
. 
<p>abc</p> 
</div> 

Die CSS:

.topbar{ 
    position:fixed; 
    width:100%; 
    height:50px; 
    background-color:#000; 
    box-shadow: 0 6px 2px -2px gray; 
} 
.content{ 
    position: relative; 
    top:60px; 
} 

fiddle

Answer 2

Fügen Sie dem Inhaltscontainer eine margin-top Einstellung hinzu, die der Höhe Ihrer Kopfzeile entspricht (dh das Element, das derzeit von der festen Kopfzeile überlappt wird)