Question

我正在网站上，我希望导航栏固定但可以正常工作。我已经阅读了很多文章，但是这些修复都不对我有用。我不知道我做错了什么。这是我的html和CSS的样子：

body{
  margin:0px;
}
nav{
  background:#212324;
  postion:fixed;
  width:100%;
  top:0;
  left:0;
  right:0;  
}

main{
  margin-top:-16px;
  background:red;

}

<nav id="navbar">
  <img src="https://image.ibb.co/goEY18/Logo_Makr_4zk77m.png" alt="logo">
         <i class="fa fa-bars" onclick="showLinks()"></i>
 <ul id="link-list">
   <li><a href="">Me</a></li>
   <li><a href="">Skills</a></li>
   <li class="third"><a href="">Works</a></li>
   <li id="cv"><a href="">Download CV</a></li>
   <li></li>
  </ul>
</nav>
<main>
<section>
<p>There's a lot of text here </p>
</section>
</main>

有指向代码的链接 https://codepen.io/stel/pen/WKEezJ

Answer 1

css中有错字-更改

postion：fixed;

到

position: fixed;

可以解决问题。

希望这会有所帮助：）

Answer 2

“位置：固定”应为“位置：固定”（位置到位置）

body{
  margin:0px;
}
nav{
  background:#212324;
  position:fixed;
  width:100%;
  top:0;
  left:0;
  right:0;  
}

main{
  margin-top:-16px;
  background:red;

}

<nav id="navbar">
  <img src="https://image.ibb.co/goEY18/Logo_Makr_4zk77m.png" alt="logo">
         <i class="fa fa-bars" onclick="showLinks()"></i>
 <ul id="link-list">
   <li><a href="">Me</a></li>
   <li><a href="">Skills</a></li>
   <li class="third"><a href="">Works</a></li>
   <li id="cv"><a href="">Download CV</a></li>
   <li></li>
  </ul>
</nav>
<main>
<section>
<p>There's a lot of text here </p>
</section>
</main>

这是您的代码https://jsfiddle.net/d49n5w8f/1/

固定位置仍然不起作用

2 个答案: