如何將導航欄永久置於頂部？

Question

我可以使導航欄始終位於頂部嗎？

我不是在說：position：fixed;事情......

與我的導航欄的問題是，當你放大出來它是不是在上面了......

我怎樣才能使它像這個網站的導航欄在哪裏總是在頂部時你把它縮小？

或

是有任何機會，我可以把它像Facebook的導航欄（在頂部的其中一個說家）
有一個固定的位置，但仍然是相同的放大或縮小時。

我的整個的CSS代碼是在這裏，如果你想查詢該網站的鏈接是導航欄的HTML是有也

：

http://hyperraze.comxa.com/

感謝

\t ul.navbar{ 
 
\t float: left; 
 
\t display: inline; 
 
} 
 

 
#hyper{ 
 
\t position: relative; 
 
\t top: 70px; 
 
\t z-index: -1; 
 
\t opacity: 0.9; 
 
} 
 

 
a.navbar{ 
 
\t display: inline; 
 
\t padding: 9px; 
 
\t display: block; 
 
\t float: left; 
 
\t background-color: #009900; 
 
\t text-decoration: none; 
 
\t border-right: 53px solid red; 
 
\t width: 70px; 
 
} 
 

 
a.navbar:hover{ 
 
\t color: #009900; 
 
\t background-color: blue; 
 
} 
 

 
div.navbar{ 
 
\t border: 0px; 
 
\t background-color: red; 
 
\t width: 40000px; 
 
\t height: 50px; 
 
\t padding-top: 0px; 
 
\t padding-bottom: 2px; 
 
\t position: fixed; 
 
\t bottom: 623px; 
 

 
} 
 

 

 
#link1,#link2,#link3,#link4,#link5,#link6,#link7{ 
 
\t position: relative; 
 
\t bottom: 9px; 
 
} 
 

 
#cons{ 
 
\t position: relative; 
 
\t top: 150px; 
 
\t width: 250px; 
 
\t z-index: -1; 
 
} 
 

 
h1{ 
 
\t color: yellow; 
 
\t font-family: 'Press Start 2P', cursive; 
 
\t text-align: center; 
 
\t position: relative; 
 
\t top: 40px; 
 
\t opacity: 0.5; 
 
} 
 

 
h2{ 
 
\t color: #009900; 
 
\t text-align: center; 
 
\t font-family:'Orbitron', sans-serif; 
 
\t position: relative; 
 
\t top: 120px; 
 
\t font-size: 60px; 
 
} 
 

 
#data{ 
 
\t color: #b2950b; 
 
\t text-align: right; 
 
\t font-family: 'Amatic SC', cursive; 
 
\t position: relative; 
 
\t top: 300px; 
 
\t font-size: 17px; 
 
} 
 

 
#marq{ 
 
\t color: #fff; 
 
\t background-color: black; 
 
\t position: relative; 
 
\t top: 70px; 
 
\t font-family: 'Josefin Slab', serif; 
 
}

<div id="dmenu" class="navbar"> 
 
<center> 
 
<ul><a class="navbar" id="link1" href="index.html">HOME</a></ul> 
 
<ul><a class="navbar" id="link2" href="index.html">GAMES</a></ul> 
 
<ul><a class="navbar" id="link3" href="index.html">TUTORIAL</a></ul> 
 
<ul><a class="navbar" id="link4" href="index.html">GAMERS</a></ul> 
 
<ul><a class="navbar" id="link5" href="index.html">CONTACT</a></ul> 
 
<ul><a class="navbar" id="link6" href="index.html">ABOUT</a></ul> 
 
<ul><a class="navbar" id="link7" href="index.html">DONATE</a></ul> 
 
</div> 
 
</center>

Answer 1

您必須使用：top: 0;而不是bottom: 623px;代替div.navbar。使用bottom屬性是爲什麼當有人縮小頁面時，您的div.navbar元素出現故障。

前：

後：

Answer 2

更改這個類：

div.navbar{ 
border: 0px; 
background-color: red; 
width: 40000px; 
height: 50px; 
padding-top: 0px; 
padding-bottom: 2px; 
position: fixed; 
top:0; /*added this*/ 

} 

Answer 3

是。默認情況下，事情總是從上到下流動，無論變焦。

雖然你可以嘗試尋找一款可行的bandaid，但我認爲你會遇到一個嚴重問題，錯誤的道路。從你的代碼中，很明顯你對HTML有很多誤解，以及元素是如何設計的。

什麼你應該做的是基本改造整個頁面：

1. 修復多個語法問題，在您的網站/理解 - <center>，<marquee>，<font>，<ul>沒有<li>，混了結束標籤，腳本在</html>之外，bgcolor屬性...

2. 然後，使用適當的HTML將您的網站從TOP設置爲BOTTOM。

從我猜，你想是這樣的：

<nav id="navbar"> 
    <a id="link1">...</a> 
    <a id="link2">...</a> 
</nav> 

<img id="logo" src="..." alt="Awesome Logo" ...> 

<h1>...</h1> 
<h2>...</h2> 

添加在你的CSS而不觸及HTML。

你會意識到你實際上並不需要做任何特別的事情來讓它保持在頂端 - 它總是這樣做。