Держите логотип / заголовок всегда сверху страницы

Question

, поэтому я пытаюсь сохранить логотип / заголовок в верхней части страницы.

Я уже пробовал что-то вроде position: fixed; z-index: 9999; top: 0; left: 0;, соответственно left: 40%; или что-то подобное, чтобы сохранить мой логотип в середине страницы.

Я получил что-то простое:

<div style="text-align:center;">
     <a href="/"><img src="/img/logo.png" style="max-height:100px;"/></a><br/>
</div>

и затем я просто включаю его на другой странице, где я хочу его использовать

<?php include 'header.php'; ?>

Итак, как уже упоминалось, я попытался изменить

<div style="text-align:center;">

до

<div style="text-align:center; position: fixed; z-index: 9999; top: 0; left: 40%;">

Но: здесь происходит следующее: верхний колонтитул находится над остальной частью верхней части страницы, поэтому первые x пикселей не видны, поскольку верхний колонтитул находится над ним.

Так что мне на самом деле нужно, чтобы сначала был верхний колонтитул вверху страницы (например, сначала оставьте остальную часть страницы под верхним колонтитулом), а при прокрутке заголовок должен стать fixed .. ..

Как мне этого добиться? Надеюсь, вы понимаете, о чем я. PS: Я тоже использую Bootstrap, если это поможет достичь этого.

Answer 1

Когда вы добавляете фиксированную и / или абсолютную позицию к элементу, это означает, что элемент покинет естественный поток, и теперь он принадлежит «слою», который не связан со слоем, где все элементы находятся с естественным потоком. документа.

Это отличная функция, поскольку теперь вы можете размещать эти элементы в любом месте, не беспокоясь об остальной части страницы.

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

Например, если у вас было следующее:

    <div class="header"></div>
   <div class="content"></div>

Повторив то, что вы сделали, добавьте позицию, фиксированную к заголовку, и учтите, что ее высота составляет 50 пикселей, элемент содержимого получит верхнюю точку отступа: 50 пикселей, и это должно сработать.

.header{
   position:fixed;
   top:0;
   height:50px;
 }


.content{
  padding-top:50px;
 }

Я предлагаю не использовать встроенные стили и сохранять их в формате