margin влияет на положение других фиксированных элементов

Я хотел установить верхний заголовок в фиксированном положении, чтобы контент прокручивался под ним, и наткнулся на некоторую странность. Если я установлю margin-top для div содержимого, это поле также повлияет на заголовок и переместит его вниз, даже если для него установлено значение position:fixed. Я нашел обходной путь, установив div содержимого в position:relative и используя top: чтобы сместить его на ту же величину, но мне кажется странным, что невложенный div может влиять на элемент с фиксированным позиционированием, и хотел бы знать, почему это происходит .

Я получаю то же самое в Safari, Firefox и Chrome. В Opera поля смещают содержимое вниз и оставляют заголовок на месте, чего я и ожидал, но по сравнению с другими результатами, возможно, это ошибка Opera. То, о чем я говорю, можно увидеть в этом JSFIDDLE(не используйте Opera! :) ).

Вот код:

css:

body {
    background:#FFD;
}

#header {
    position:fixed;
    height:15px;
    width:100%;
    text-align:center;
    border-bottom:1mm dashed #7F7F7F;
    background-color:#EEE;
}

#content {
    width:90%;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E5FF;
    border: 1px solid #000;
}

html:

    

        HEADER
    
    

        
Text1
        
Text2
        
Text3
        
Text4