#css #html #stylesheet
#css #HTML #таблица стилей
Вопрос:
В этом примере, почему фиксированный заголовок # (вверху) не начинается в верхней части страницы, но в этом примере это так?
Единственное отличие заключается в том, что я изменил «margin» #content на «padding» вместо этого (повторно).
Итак, почему это крошечное изменение оказывает огромное влияние? Как мне поместить фиксированный заголовок # вверху страницы, все еще используя «margin» для #content?
Комментарии:
1. включение top: 0 может помочь…
2. @Kasturi это так. Не уверен, почему это так, хотя иначе я бы добавил ответ для OP lol
Ответ №1:
Это из-за сокращающейся маржи.
Если верхние и нижние поля прямоугольника соприкасаются, то поля могут прорваться через него. В этом случае положение элемента зависит от его взаимосвязи с другими элементами, поля которых сворачиваются.
В этом случае margin может нажать вниз #header (который имеет position: fixed ), если вы не присвоите ему top значение, отличное от значения по умолчанию auto .
Способ исправить это — добавить overflow: hidden в #wrapper : http://jsfiddle.net/CyaJ8/6 /
Это работает, потому что:
Поля элементов, которые устанавливают новые контексты форматирования блока (такие как значения с плавающей точкой и элементы с ‘overflow’, отличные от ‘visible’), не сворачиваются вместе со своими дочерними элементами в потоке.
Комментарии:
1. Я понимаю, что поля сворачиваются, как описано здесь: ghz.me/6l Но почему это толкает фиксированный элемент вниз? Я не совсем понимаю. Я понимаю, что будет соблюден самый большой вертикальный интервал между двумя элементами на одном дочернем уровне, которые примыкают друг к другу. Как это влияет на фиксированный элемент?
2. @trusktr: Признаюсь, я не могу до конца разобраться в мучительных технических деталях спецификаций W3, чтобы точно ответить на то, что происходит. Лучшее, что я могу сделать, это сказать, что это определенно связано с уменьшением полей.
3. да, это так сложно. это почти как неписаное правило. Однако он достаточно прост в использовании
top.
Ответ №2:
Добавление
#header { top: 0; }
должно решить проблему.