1. 首页
  2. 问答
  3. css导航栏位置固定不起作用

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

2017-03-08 93 views
0

我想制作一个网站。我决定让导航栏有一个固定的位置，所以当我向下滚动时，我总是可以看到它，但是当我将nav属性添加到属性位置时：固定它就会消失。不能'弄清楚发生了什么。有人可以解释，我做错了什么？非常感谢你！ P.S：我是新来的编码。css导航栏位置固定不起作用

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>

来源

2017-03-08 Andrei

+0

谢谢大家对你的答案和你的时间。在我将top，left和right属性设置为0之后，一切正常。看起来我有另一个指定了z-index的元素，它搞乱了一切。我改变了nav元素的z-index值，现在一切正常。 – Andrei

+0

将'left'和'right'设置为0是'width：100％'的另一种选择（正如我在inmy answer中所写的），但这两种方法都会为固定元素定义宽度。 'left：0'''不会起作用，顺便说一句... – Johannes

回答

0

一旦你解决，你必须指定你想要的位置。

top：20px; left：0px;

等....

来源

2017-03-08 19:30:08

+0

不是真的 - 你还需要'right：0'来使它工作 - 作为另一种宽度为100％的方法' – Johannes

0

你有一个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>

来源

2017-03-08 19:30:38 Johannes

0

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

来源

2017-03-08 19:30:55 SilverLink

0

我让你在这里工作版本。我只跟01​​更换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％对文件的一些滚动

来源

2017-03-08 19:31:07

0

老实说，我不看有什么不对：

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

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

来源

2017-03-08 19:31:08 joethemovie

0 

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

工作代码

来源

2017-03-08 19:34:28 Knitesh

相关问题

 相关问题