html - Why isn't my margin working with position: fixed?

Question

JSFiddle Demo

I have a div for a header and a div for a content wrap.

For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why.

Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view.

Hoping someone can explain why this happens or at least what it is called so I can google it.

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;
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;
}

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

Answer 1

When you set an element to position: fixed;, you remove it from the "normal document flow". Imagine your website is a river, and you're looking down at it from above. Each element is a rock in that river. Any margin you've applied to your elements is like a force field around one of those rocks.

When you set position: fixed; on one of those rocks, you're essentially pulling it up out of the river so that the rock, in essence, is floating above the river in midair. The rock and the river's flow of water will still look the same to you, because you're up above looking straight down, but the rock is no longer interacting with the river's flow.

If you had applied margin to that rock, that force field around the rock is no longer keeping any water away from it, because the rock is hovering in midair thanks to its position: fixed; property. So there's no water or other rocks (other elements) from which it needs to distance itself. Your rock's force field (your element's margin) is pushing against thin air, so nothing in the river will be affected.

But a picture is worth a thousand words, as the saying goes:

This man is not really kicking over the Leaning Tower of Pisa, but it sure looks like it! In this example, the background of the picture, including the Leaning Tower of Pisa, is your page (or your 'normal document flow'), and the man is an element (or the rock from our last example) with position: fixed; applied.

Read more about the position property here and, more up-to-date, here.

One way to fix this is to set your header to top: 20px; z-index: 2; to make sure it's positioned at the top and above every other element on the z-plane, and then give your body position: relative; and a margin-top equal to the height of the header (in this case, 52px) plus the value of the header's top property. To increase the space between your header and your body, just increase the margin-top amount. This is sometimes called the "sticky header/footer" approach. Here's a demo:

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;
}

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