поле влияет на положение других фиксированных элементов
Я хотел установить верхний заголовок в фиксированной позиции и иметь прокрутку контента под ним и натолкнулся на некоторую странность. Если я установлю поле margin-top для содержимого div, это поле также повлияет на заголовок и переместит его вниз, даже если оно установлено в положение: fixed. Я нашел обходной путь, установив для div содержимого значение position: относительный и используя 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:
<body>
<div id="header">
HEADER
</div>
<div id="content">
<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
<p>Text4</p>
</div>
</body>