html - 我创建了一个固定的导航栏，但现在按钮位于导航栏的顶部

Question

我正在尝试制作一个固定的导航栏，但问题是当我修复它时，我页面上的按钮会越过导航栏。

我知道当你固定一个元素的位置时，它就会脱离页面的流程。

但我找不到可行的解决方案。我发现了另一个关于此的问题，但答案不起作用。答案说margin-top应该加上。但它只是让按钮下降

这是我尝试过的：

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>

谢谢。

标签： htmlcss

Answer 1

使用具有前 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>