[英]Fixed navigation bar would not work even using position: fixed in css
[英]css navigation bar position fixed not working
我正在嘗試建立一個網站。 我決定將導航欄設置為固定位置,以便在向下滾動時始終可以看到它,但是當我向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>
確定位置后,您必須指定所需位置。
頂部:20px; 左:0px;
等等....
您必須為固定元素添加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>
如果您的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;
}
我在這里給你一個工作版本。 我只將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%,以便在文檔上滾動
老實說,我沒有發現任何錯誤:
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; }
確保將其添加到導航父元素。
* { 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>
工作代碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.