css导航栏位置固定不起作用

Question

我正在尝试建立一个网站。我决定让导航栏有一个固定的位置，所以当我向下滚动时我总能看到它但是，当我添加到nav元素时，属性位置：修复它就消失了。广东话＆＃39;弄清楚发生了什么。有人可以解释一下，我做错了什么吗？非常感谢你！

：我不熟悉编码。

HTML和CSS

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

确定位置后，您必须指定所需位置。

顶部：20px; 左：0px;

等...

Answer 2

您必须向固定元素添加width（在这种情况下为100％）：

＆＃13;

＆＃13;

* {
  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: fixed;
  width: 100%;
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您的nav设置为realtive且更改为fixed，则absolute元素将相对于body，这些元素将离开nav。

将position元素的absolute和nav的css更改为：

nav {
    background-color: #242628;
    height: 70px;
    padding-left: 20px; }
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

Answer 4

我在这里给你一个工作版本。我只在您的代码中将for x in i1: slope1 = (i1[x+1] - i1[x]) / (v[x+1] - v[x]) 替换为relative fixed

＆＃13;

＆＃13;

nav

＆＃13;

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

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

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

nav {
  position: fixed;
  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;
}

＆＃13;

＆＃13;

＆＃13;

请注意，我将<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>设置为300％，以便在文档上滚动

Answer 5

老实说，我没有看到任何错误：

http://codepen.io/anon/pen/BWpLdd

height

确保您将其添加到导航父元素。

Answer 6

＆＃13;

＆＃13;

* {
  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: fixed;
  background-color: #242628;
  height: 70px;
  padding-left: 20px;
   width: 100%;
 background-color: black;
}

nav ul {
  position: relative;
  height: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
 
}

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: 200px;
  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;
}

article{
  height: 500px;
}

＆＃13;

<header>
  <nav>
    <img id="logo" src="" 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>
<article></article>

＆＃13;

＆＃13;

＆＃13;

工作代码