CSS: почему фиксированный элемент НЕ начинается в верхней части страницы в этом примере?

Question

В в этом примере , почему фиксированный #header (вверху) не начинается в верхней части страницы, а в в этом примере это происходит?

Единственное отличие состоит в том, что я изменил "margin" #content вместо "padding" (репрезентативно).

Так почему это крошечное изменение оказывает огромное влияние? Как поместить фиксированный #header в верхнюю часть страницы, все еще используя «margin» для #content?

Answer 1

Это из-за сворачивающихся полей .

Если верхнее и нижнее поля бокса соприкасаются, значит, поля могут разрушаться через него.В этом случае положение элемента зависит от его связи с другими элементами, поля которых свернуты.

В этом случае margin может оттолкнуть #header (который имеетposition: fixed), если вы не укажете top значение, отличное от значения по умолчанию auto.

Чтобы исправить это, добавьте overflow: hidden к #wrapper: http://jsfiddle.net/CyaJ8/6/

Это работает, потому что:

Поля элементов, которые устанавливают новые контексты форматирования блока (такие как плавающие элементы и элементы с «переполнением», отличным от «видимого» * ​​1025 *), не сворачиваютсясо своими детьми в потоке.

Answer 2

Добавление

#header { top: 0; }

должно решить проблему.