单独元素的余量如何影响固定元素的位置？

Question

I have two separate DIV s one position : fixed for notification bar, and one for main container, when I give the container some margin-top , this also pushes my notification bar!

Here is a fiddle: http://jsfiddle.net/Zh9k8/2/

and, I know I can stick it to top of the page with top : 0 but I want to know why does it happen.

Answer 1

Common issue caused by collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

The fix is to not use a margin, but create space another way. You could add top padding to .container and remove the margin:

http://jsfiddle.net/Zh9k8/4/

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

Very confusing lingo, but it describe's exactly what is happening.

Answer 2

You can still use margins to create space. And if you set minimal padding on the body it will eliminate the margin collapse with the fixed block. See updated fiddle: http://jsfiddle.net/BMCc9/ .

body {
    padding: 0.1px;
}