Warum ist nicht meine Marge arbeiten mit position: fixed?

Wenn Sie ein element zu position: fixed;, entfernen Sie es aus der "normalen Belegfluss". Stellen Sie sich vor Ihre Webseite ist ein Fluss, und du bist auf der Suche nach unten auf Sie von oben. Jedes element ist einem Felsen, der Fluss. Alle margin Sie angewendet haben, um Ihre Elemente ist wie ein Kraftfeld um diesen Felsen.

Wenn Sie position: fixed; auf einem dieser Felsen, Sie sind im wesentlichen zieht es aus dem Fluss, so dass der rock, ist im wesentlichen schweben über dem Fluss in die Luft. Die Felsen und der Fluss der Fluss des Wassers wird noch immer gleich Aussehen, um Sie, da sind Sie oben Suche gerade nach unten, aber der Stein ist nicht mehr die Interaktion mit dem fließen des Flusses.

Wenn Sie angewandt hatte margin zu diesem rock, das Kraftfeld um den Felsen herum ist nicht mehr zu halten Wasser Weg von es, weil der rock schwebt in der Luft Dank seiner position: fixed; Eigenschaft. So gibt es kein Wasser oder andere Felsen (andere Elemente) aus, die es braucht, um Abstand zu sich selbst. Ihr rock force field (Ihr element das margin) drückt gegen die Luft, so dass nichts in den Fluss betroffen sein wird.

Aber ein Bild ist tausend Worte Wert ist, wie das Sprichwort sagt:

Dieser Mann ist nicht wirklich munter über den Schiefen Turm von Pisa, aber es sieht sicher wie es! In diesem Beispiel wird der hintergrund des Bildes, einschließlich der Schiefe Turm von Pisa, ist Ihre Seite (oder Ihrer 'normalen Belegfluss'), und der Mann ist ein element (oder der rock vom letzten Beispiel) mit position: fixed; angewendet.

Lesen Sie mehr über die position-Eigenschaft hier und, mehr up-to-date, hier.

Einen Weg, um dies zu beheben, stellen Sie Ihren header zu top: 20px; z-index: 2; um sicherzustellen, es ist positioniert an der Spitze und vor jedem anderen element auf der z-Ebene, und dann geben Sie Ihrem Körper position: relative; und ein margin-top gleich der Höhe des header (in diesem Fall 52px) plus den Wert des header - top Eigenschaft. Zur Erhöhung der Raum zwischen Ihrem Kopf und Ihren Körper, erhöhen Sie einfach die margin-top Menge. Dies wird manchmal als die "sticky-header/footer" - Ansatz. Hier ist eine demo:

CSS:

body {
    margin: 0;
    padding: 0;
    font-family: arial;
    background: #5A9910;
    text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* ==========================Header with logo==*/
div.header {
    position: fixed;
    top: 20px;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px #333;
    -moz-box-shadow: 0 8px 6px -6px #333;
    box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
    width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
    width: 80%;
    height: 1600px;
    background: #ccc;
    margin: 0 auto;
    position: relative;
    margin-top: 72px;
}

HTML:

<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>

P. S. position: fixed; ist eine CSS-Eigenschaft (ein Eigenschaft-Wert-paar, um genau zu sein), kein HTML-Attribut.

Ihre header-Eigenschaft position:fixed. Daher ist die Marge, die Sie auf header hat keinen Einfluss auf den Inhalt".

Um dieses problem zu lösen, müssen Sie entweder margin oder padding auf die contentwrap element