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

Question

我有两个单独的DIV一个position : fixed用于通知栏，一个用于主要容器，当我向container提供一些margin-top时，这也会推送我的通知吧！

这是一个小提琴：http://jsfiddle.net/Zh9k8/2/

并且，我知道我可以用top : 0将其粘贴到页面顶部，但我想知道它为什么会发生。

Answer 1

边距折叠导致的常见问题：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

修复是不使用边距，而是以另一种方式创建空间。您可以将顶部填充添加到.container并删除边距：

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

  

流入块元素的上边距与其第一个边缘折叠   如果元素没有顶部，则流入块级子级的上边距   边界，没有顶部填充，孩子没有间隙。

     

如果元素的边距与其父元素的上边距折叠，   框的顶部边框边缘定义为与   父母的。

非常令人困惑的术语，但它描述了究竟发生了什么。

Answer 2

您仍然可以使用边距来创建空间。如果在body上设置最小填充，它将消除固定块的边距崩溃。请参阅更新的小提琴：http://jsfiddle.net/BMCc9/。

body {
    padding: 0.1px;
}