html - css 导航栏位置固定不工作

Question

我正在尝试制作一个网站。我决定让导航栏有一个固定的位置，这样当我向下滚动时，我总能看到它，但是，当我将属性 position:fixed 添加到 nav 元素时，它就会消失。无法弄清楚发生了什么。有人可以解释一下，我做错了什么吗？非常感谢! P.S:我是编码新手。

HTML 和 CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

header nav #logo {
  width: 140px;
  position: absolute;
  top: 15px;
}

nav {
  position: relative;
  background-color: #242628;
  height: 70px;
  padding-left: 20px;
}

nav ul {
  position: absolute;
  height: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 600px;
  padding-left: 200px;
}

nav ul li {
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  display: inline;
  float: left;
  height: inherit;
  width: 100px;
  border-right: 1px solid gray;
}

nav ul li:hover {
  background-color: rgba(12, 240, 255, 0.3);
}

nav ul li a {
  color: white;
  text-decoration: none;
  position: absolute;
  height: inherit;
  width: inherit;
  text-align: center;
  padding-top: 25px;
}

<header>
  <nav>
    <img id="logo" src="images/logo.png" alt="logo" />
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Rate it!</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </nav>
</header>

Answer 1

一旦你确定了位置，你必须指定你想要的位置。

顶部:20px； 左:0px；

等等......