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

Question

Я пытаюсь сделать фиксированную панель навигации, но проблема в том, что когда я ее фиксирую, кнопки на моей странице go над панелью навигации.

Я знаю, что когда вы фиксируете положение элемента , он уходит из потока страницы.

Но я не смог найти рабочего решения. Я нашел еще один вопрос по этому поводу, но ответ не помог. В ответе сказано, что нужно добавить margin-top. Но он просто заставляет кнопки go вниз

Вот что я пробовал:

body {
  background-color: rgb(0, 0, 0);
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 13vh;
  background-color: #d6e0e4;
  position: fixed;
  width: 100%;
}

.contain {
  padding-top: 13vh;
}

.packing-d {
  background-color: #923a1a;
  border: none;
  color: white;
  padding: 50px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: harlow;
  position: absolute;
  top: 191%;
  left: 30%;
  transition: 500ms;
}

<nav>
  <div class="logo">

    <h4>Me</h4>

  </div>
  <ul class="navlinks">

    <li><a href="#">Home</a></li>
    <li><a href="#about">About Me</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Tr</a></li>
    <li><a href="#">En</a></li>
  </ul>
</nav>
<div class="contain">
  <div>
    <img class="first-img" src="SYF1.png" alt="">
  </div>

  <div id="about">
    <img class="second-img" src="barbeküpng.png" alt="">

    <div class="topRow" id="works">

      <button class="packing-d">Packing Designs</button>
      <button class="logo-d">Logo Designs</button>
      <button class="poster-d">Poster Works</button>
      <button class="model-d">3d Model Works</button>
      <button class="video-d">Video Animations</button>
      <button class="videoe-d">Video Edit Works</button>
      <button class="art-d">Art Works</button>

    </div>
  </div>

Спасибо.

Answer 1

nav {
...
  z-index: 99;
}

Должен исправить.

Answer 2

Использовать фиксированное позиционирование с верхним значением 0. Это будет работать так, как вы хотели, без хаков.

body {
  background-color: rgb(0, 0, 0);
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 13vh;
  background-color: #d6e0e4;
  position: sticky;
  top: 0;
  width: 100%;
}

.contain{
  min-height: 1500px;
}

.packing-d {
  background-color: #923a1a;
  border: none;
  color: white;
  padding: 50px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: harlow;
  top: 191%;
  left: 30%;
  transition: 500ms;
}

<nav>
  <div class="logo">

    <h4>Me</h4>

  </div>
  <ul class="navlinks">

    <li><a href="#">Home</a></li>
    <li><a href="#about">About Me</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Tr</a></li>
    <li><a href="#">En</a></li>
  </ul>
</nav>
<div class="contain">
  <div>
    <img class="first-img" src="SYF1.png" alt="">
  </div>

  <div id="about">
    <img class="second-img" src="barbeküpng.png" alt="">

    <div class="topRow" id="works">

      <button class="packing-d">Packing Designs</button>
      <button class="logo-d">Logo Designs</button>
      <button class="poster-d">Poster Works</button>
      <button class="model-d">3d Model Works</button>
      <button class="video-d">Video Animations</button>
      <button class="videoe-d">Video Edit Works</button>
      <button class="art-d">Art Works</button>

    </div>
  </div>

Answer 3

Вы можете использовать свойство z-index. В документации MDN указывается следующее:

Свойство z-index CSS устанавливает z-порядок позиционированного элемента и его потомков или гибких элементов. Перекрывающиеся элементы с большим z-индексом перекрывают элементы с меньшим. 1014 *

body {
  background-color: rgb(0, 0, 0);
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 13vh;
  background-color: #d6e0e4;
  position: fixed;
  width: 100%;
  z-index: 2; /* If 2 is not enough, try increasing the number. */
}

.contain {
  padding-top: 13vh;
}

.packing-d {
  background-color: #923a1a;
  border: none;
  color: white;
  padding: 50px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: harlow;
  position: absolute;
  top: 191%;
  left: 30%;
  transition: 500ms;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav>
  <div class="logo">

    <h4>Me</h4>

  </div>
  <ul class="navlinks">

    <li><a href="#">Home</a></li>
    <li><a href="#about">About Me</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Tr</a></li>
    <li><a href="#">En</a></li>
  </ul>
</nav>
<div class="contain">
  <div>
    <img class="first-img" src="SYF1.png" alt="">
  </div>

  <div id="about">
    <img class="second-img" src="barbeküpng.png" alt="">

    <div class="topRow" id="works">

      <button class="packing-d">Packing Designs</button>
      <button class="logo-d">Logo Designs</button>
      <button class="poster-d">Poster Works</button>
      <button class="model-d">3d Model Works</button>
      <button class="video-d">Video Animations</button>
      <button class="videoe-d">Video Edit Works</button>
      <button class="art-d">Art Works</button>

    </div>
  </div>
</body>
</html>