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

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

Я получаю то же самое в Safari, Firefox и Chrome. В Opera маржа отталкивает контент и оставляет заголовок на месте, что я и ожидал от него, но по сравнению с другими результатами, возможно, это Opera, которая ошибается. То, о чем я говорю, можно увидеть в this 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>

источник

2012-03-08 seron

#header { 
    top: 0px !important; 
}

источник

2012-03-08 21:22:38 Seabass

'! Важный' не требуется. –

Правильно ты - хороший улов. – Seabass

Как неловко пропустить это. Благодаря! Тем не менее, какой-то странный, чтобы иметь ту же маржу, что и для элемента, не принадлежащего потомству, не так ли? – seron

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

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

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

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

источник

2012-03-08 21:31:04 Jeff

-1

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

источник

2012-03-08 23:09:25 Zensar

Из того, что я прочитал о крахе поля поля не отображаются, а не наоборот. Во всяком случае, «top: 0px» сделал это, как указал Зенбайт. – seron

@seron Я думаю, что то, что вы читаете о крахе краев, неверно. Коллапс маржи использует большее из двух значений для установки поля, что совершенно противоположно тому, что маржи не отображаются. См. [Эту тему] (http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers) для более подробного объяснения того, как это вызывает проблему. описано. – Adam

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

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

источник

2012-05-23 23:33:41 user1413795

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

ответ

Смежные вопросы