Исправить "липкую" панель навигации в верхней части экрана

Question

Итак, я пытался создать панель навигации, используя HTML и CSS, которые будут «прилипать» к верхней части страницы, даже когда пользователь прокручивает страницу вниз. Для этого использовал тег position: sticky. Проблема в том, что я не могу исправить div в верхней части страницы.

Это мой CSS:

.bar {
  position:sticky;
  top:0;
  color: white;
  background-color: black
}

p {
  display: inline;
}

... и мой HTML-код:

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>

Правильность sticky работает. Проблема в том, что bar не «исправлено» в верхней части страницы. Я знаю. Не лучшее слово, используемое для объяснения. Я просто хочу, чтобы это было там, без каких-либо наценок. Пытался уменьшить отступы / поля тела, но не получилось. Что я могу сделать?

Еще один вопрос: что на самом деле top:0 делает? Правило position:sticky не работает без него, и я хочу знать, почему.

Answer 1

Чтобы решить проблему с полями на панели навигации, неплохо было бы выполнить сброс в верхней части кода CSS, чтобы переопределить настройки браузера по умолчанию. Здесь я установил поля и отступы для всех элементов равными 0. Так как он находится сверху, любые стили, следующие за ним, отменят сброс, и вы можете настроить его так, как душе угодно.

Атрибут Top необходим для работы позиции закрепления, поскольку браузер должен определить конечное местоположение элемента. Атрибуты Left, Right и Bottom также будут выполнять эту работу.

* {
  margin: 0px;
  padding: 0px;
}

.bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  color: white;
  background-color: black
}

p {
  display: inline;
}

.demoFiller {
  background-color: coral;
}

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>
<div class="demoFiller">
  0<br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br>
</div>

Answer 2

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

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

Конечно, фиксированный элемент удаляет пробел в том месте, где должен был быть элемент, чтобы ваш контент мог перекрываться, и для исправления перекрывающегося контента потребуется добавить еще один элемент с той же высотой, что и ваш фиксированный элемент.

см., Например, ниже.

.bar {
  position:fixed;
  top:0;
  color: white;
  background-color: black;
  width:100%;
  left:0;
}

p {
  display: inline;
}

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>
<div style="height:1000px">
</div>