How does margin of separate element affect position of fixed element?
css, html
Solution
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.
Problem
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.