如何永久保持导航栏？

Question

我可以让导航栏始终位于顶部吗？

我不是在说：位置：固定;事...

导航栏的问题在于，当你缩小它时，它不再是顶部...

我怎样才能让它像这个网站的导航栏一样，当你缩小它时它总是在顶部？

或

有没有机会我可以像facebook的导航栏（顶部的那个说家）一样 有一个固定位置，但在放大或缩小时仍然相同。

我的整个CSS的代码在这里，导航栏的html也在那里

如果您想检查网站链接是：

http://hyperraze.comxa.com/

由于

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

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

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

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

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

}


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

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

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

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

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

#marq{
	color: #fff;
	background-color: black;
	position: relative;
	top: 70px;
	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

Change this class:

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

是。默认情况下，无论缩放如何，始终都会从上到下流动。

虽然你可以尝试寻找一个有效的乐队，但我认为你是一个严重问题，错误的道路。从您的代码中可以清楚地看出，您对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>

1. 在不触及HTML的情况下添加CSS。

你会意识到你实际上并不需要做任何特别的事情来让它保持在最高位 - 它总是会这样做。