CSS：为什么在此示例中，固定元素NOT不在页面顶部开始？

Question

在this example中，为什么固定的#header（位于顶部）不是从页面顶部开始，而是在this example中呢？

唯一的区别是我将#content的“margin”改为“padding”而不是（repsectively）。

那为什么这个微小的变化会产生巨大的影响呢？如何将固定的#header放在页面顶部，同时仍然为#content使用“margin”？

Answer 1

这是因为collapsing margins。

  

如果是方框的顶部和底部边距   相邻，那么它是可能的   通过它崩溃的边缘。在   这种情况下，元素的位置   取决于它与...的关系   边缘正在存在的其他元素   折叠。

在这种情况下，margin可以下推#header（具有position: fixed），除非您为top提供除auto之外的值overflow: hidden }}

解决此问题的一种方法是将#wrapper添加到{{1}}：http://jsfiddle.net/CyaJ8/6/

这是因为：

  

建立新元素的边距   阻止格式化上下文（例如   具有'溢出'的浮点数和元素   除了'可见'）之外不要崩溃   与流动的孩子们一起。

Answer 2

添加

#header { top: 0; }

应该解决问题。