Блог

Главная - Вопросы по программированию - с позицией: исправлено, что сообщения переходили в меню

с позицией: исправлено, что сообщения переходили в меню

#html #css #menu

Вопрос:

Я хочу, чтобы строка меню оставалась неизменной, но когда я использую Position: Fixed, сообщения повреждаются и переходят в меню, что мне делать, чтобы прокрутить сообщения немного ниже меню.

Я поместил свой код здесь.

index.html

 <body>
    <header>
      <div class="container">
        <div class="logo">Lorem, ipsum dolor.</div>

        <nav class="container-menu">
          <ul>
            <li><a href="#">home</a></li>
            <li><a href="/#about-section">about</a></li>
            <li><a href="#">skills</a></li>
            <li><a href="#">projects</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <p>
      Lorem...
    </p>
  </body>

menu.css

 html {
  box-sizing: border-box;
  border: 3px solid green;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

header {
  border: 5px solid purple;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 10px grey;
  /* position: fixed; */
}

.container {
  border: 3px solid goldenrod;
  position: relative;
  background: tomato;
  top: 0;
  width: 80%;
  margin: 0 10%;
  z-index: 999999;
}

Комментарии:

1. Если вы поместите позицию fixed , все остальное будет игнорировать ее границы. Итак, следующий элемент не знает его height . Вам нужно будет добавить a padding-top в body (или .container ) с той же высотой, что и заголовок.

Ответ №1:

Просто добавьте немного отступов к первому абзацу:

 header   p {
  margin-top: 100px; // example value
}

Кроме того, обратите внимание, что, когда вы устанавливаете что-то положение на другое static , установите начальные значения для top/bottom/left/right :

 header {
  top: 0;
  left: 0;
  right: 0;
}

Ответ №2:

Вместо использования fixed используйте sticky:

 header {
    position: sticky;
    top: 0;
}

Комментарии:

1. Это не поддерживается основными браузерами или всеми элементами.

2. @teefars: не поддерживается основными браузерами — каким основным браузером? Internet Explorer? 95% достаточно для использования этой функции.

3. Хорошо, может быть, не главное, все еще не очень заслуживающее доверия IMO. В смартфонах и iphone могут возникнуть некоторые проблемы. Это новое свойство с некоторыми странными эффектами , если вы не понимаете позиционирование. Просто подсказка IDK

Ответ №3:

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

 body{
  padding-top:180px;
}
Метки: ,