CSS: Why does fixed element NOT start at the top of the page in this example?

In this example, why doesn't the fixed #header (the at the top) start at the top of the page, but in this example it does?

The only difference is that i changed the "marg开发者_如何学Pythonin" of #content to "padding" instead (repsectively).

So why does this tiny change have a huge impact? How do I put the fixed #header at the top of the page while still using "margin" for the #content?

---

It's because of collapsing margins.

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

In this case, the margin can push down the #header (that has position: fixed) unless you give it a top value other than the default of auto.

A way to fix this is to add overflow: hidden to #wrapper: http://jsfiddle.net/CyaJ8/6/

This works because:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

---

Adding

#header { top: 0; }

should solve the problem.