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