css导航栏位置固定不工作答案

【问题标题】：css navigation bar position fixed not workingcss导航栏位置固定不工作
【发布时间】：2017-03-08 19:16:04
【问题描述】：

我正在尝试制作一个网站。我决定让导航栏有一个固定的位置，所以当我向下滚动时，我总是可以看到它，但是当我添加到导航元素时，属性 position:fixed 它就消失了。无法弄清楚发生了什么。有人可以解释一下，我做错了什么吗？非常感谢！ 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>

【问题讨论】：

感谢大家的回答和时间。在我将顶部、左侧和右侧属性设置为 0 后，一切正常。似乎我有另一个指定了 z-index 的元素搞砸了一切。我更改了导航元素的 z-index 值，现在一切正常。
将 left 和 right 设置为 0 可以替代 width: 100% （正如我在我的回答中所写的那样），但这两种方法都具有为固定元素定义宽度的效果。 left: 0 单独是行不通的，顺便说一句...

标签： html css

【解决方案1】：

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

顶部：20px；左：0px;

等等……

【讨论】：

不是真的 - 你还需要 right: 0 才能工作 - 作为具有宽度的替代方法：100%

【解决方案2】：

您必须将width 添加到固定元素（在本例中为 100%）：

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

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

【讨论】：

【解决方案3】：

我在这里给你一个工作版本。我只在您的代码中将relative 替换为fixed 到nav

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

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

请注意，我将 height 设置为 300% 以在文档上进行一些滚动

【讨论】：

【解决方案4】：

老实说，我没有发现任何问题：

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

.scrollTest {
  height: 2000px;
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
* {
     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%;
}

nav ul {
     position: absolute;
     height: 100%;
     margin: auto;
     top: 0;
     bottom: 0;
     width: 800px;
     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-block;
    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; }

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

【讨论】：

【解决方案5】：

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

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

工作代码

【讨论】：

【解决方案6】：

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

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

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

【讨论】：