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

Question

我正在尝试建立一个网站。 我决定将导航栏设置为固定位置，以便在向下滚动时始终可以看到它，但是当我向nav元素添加属性position：fixed时，它就会消失。 不能知道发生了什么。 有人可以解释我在做什么错吗？ 非常感谢你！

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；

等等....

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

Answer 3

如果您的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;
}

Answer 4

我在这里给你一个工作版本。 我只将fixed relative替换为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％，以便在文档上滚动

Answer 5

老实说，我没有发现任何错误：

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

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

Answer 6

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

工作代码