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

Я хотел установить верхний заголовок в фиксированной позиции и иметь прокрутку содержимого под ним и наткнулся на какую-то странность. Если я установил 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>

Ответ 1

#header {
    top: 0px !important;
}

Ответ 2

#content - фиксированное положение, но координаты, которые вы установили для top, right, bottom и left, относятся к его родительскому контейнеру: #header. Другими словами, #content всегда будет прикрепляться к вершине #header. Поскольку вы нажимаете #header вниз на margin, будет следовать #content.

Вам нужно либо компенсировать маржу

#content { position: fixed; top:-25px; }

Тем не менее, я предполагаю, что вы хотите что-то исправить в верхней части экрана, и я не думаю, что это приведет вас к тому, что вы хотите. Вам нужно сломать #content из #header или сделать статически #header: position:static, чтобы содержимое было зафиксировано в верхней части окна, а не в заголовке.

Ответ 3

Или установите верхнее дополнение (вместо верхнего поля) для #content как высоту #header.

Мы выяснили, как правильно позиционировать заголовок, но мне все еще очень любопытно, почему произошло смещение в первую очередь.

Ответ 4

Я считаю, что вы ощущаете влияние "краха краев", что приводит к тому, что ваша запись "margin-top" в "содержимом" сворачивается в элемент тела страницы. Простое решение состоит в том, чтобы просто создать содержащий div div "content" и "header" и установить CSS в "overflow: hidden". Затем не забудьте установить поля и дополнение элемента "body" равным 0.