В пределах (X) HTML DOM CSS распознает четыре типа позиционирования.По умолчанию каждый элемент в HTML позиционируется статически.Это означает, что он позиционируется в соответствии с местом, в котором он появляется в нормальном потоке.
Относительное позиционирование Когда объект позиционируется relative, это означает, что он изменяет позицию на основеисточник, в котором он был бы расположен в нормальном потоке (статический).Относительный также делает что-то особенное и сообщает браузеру, что все его дочерние элементы будут расположены в соответствии с этим элементом, будь то относительный или абсолютный.
Абсолютное позиционирование Когда объект позиционируется absolute, он размещается в соответствии с положением своего ближайшего не static позиционированного предка.Если его нет, он использует <body> для определения своей позиции.Это может нарушить документооборот, если его братья или сестры не расположены absolute.Если все они расположены absolute от самого верхнего верхнего узла к текущему узлу, то он будет поддерживать поток.
Фиксированное позиционирование Это вынимает элемент из потока и позиционирует объектв соответствии с объектом Window.Это означает, что независимо от состояния прокрутки документа, его размера или любого другого свойства, он всегда будет отображаться в этом месте.(Вот как вы получаете объекты, которые прокручиваются вместе с вами).
Множественные решения вашей проблемы Сначала, как описано другими, вы можете добавить position:relative к #header.Это, как объяснено выше, сделает ваш заголовок ближайшим не static предком и будет использовать его и основу для определения позиции.Это, вероятно, не идеально для вас, потому что вы являетесь начинающим новичком, и этот absolute может легко сломать достаточно потока, чтобы вы могли бороться с элементами одного брата.
В качестве альтернативы вы можете изменить логотип с position:absolute до position:relative.Это будет держать ваш логотип в потоке, но перемещайте логотип в соответствии с тем, где он естественным образом отображается в вашем потоке документов.Скорее всего, если вы не используете float в #header, это, вероятно, тот, который вам нужен, так как он a) сохраняет поток, b) позволяет использовать дочерний элемент floats без потери потока, c) достигает вашего идеального позиционирования,d) сохраняет наследование от родительских элементов (когда это важно).
Другой вариант - изменить #header на position:absolute.Однако это может изменить способ, которым все взаимодействует, если только вы не измените все свои родительские и родственные элементы на position:absolute.Кроме того, вы можете потерять доступ к ширине и высоте, определенной предком, так как они наследуются, только если они находятся в одном потоке.Это вторая лучшая ситуация для вас, поскольку вы можете просто добавить правило body * { position:absolute; }, и все останется в потоке с вами.Тем не менее, он действительно не учит вас тому, что вам нужно узнать о позиционировании, и это просто опора.
Надеюсь, это поможет, FuzzicalLogic