定位导航栏
问题描述：
我对定位导航栏有疑问。出于某种原因，每当我浏览网页时，导航栏都不会固定在页面的顶部。这里有一个例子：https://gyazo.com/a856b5dcaadc3b8729f054ddb7387417定位导航栏
导航栏有从浏览器顶部和侧面的小部分，有没有办法拉伸/扩展它，所以它适合像堆栈溢出导航栏？
例如。
HTML：
<html lang="en">
<head>
<title>CSGOCarry.com | Win Big!</title>
<link rel="stylesheet" type="text/css" href="csgositecss.css">
</head>
<body>
<div class="container">
<div class="center">
<h1>Welcome to CSGOCarry</h1>
<h3>Where Dreams Come True</h3>
</div>
</div>
<div class="navbar">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="Jackpot.asp">Jackpot</a></li>
<li><a href="Coinflip.asp">Coinflip</a></li>
<li><a href="roulette.asp">Roulette</a></li>
</ul>
</body>
</html>
CSS：
body {
background-image: url("csgocarryback.jpg");
background-size: 100%;
}
h1 {
color:white;
text-align:center;
font-size:58px;
}
h3 {
text-align:center;
color:white;
font-size: 28px;
margin-top: -40px;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
答
尝试
.navbar{
margin: -10px;
}
确保结束<div class="navbar">
，我可以看到导航栏图像碰撞，所以如果你想添加position: relative;来避免这一点。
.navbar{
position: relative;
margin: -10px;
}
这里的的jsfiddle：https://jsfiddle.net/vtrvjwee/
答
这是默认的bodymargin。你需要重置你的CSS。
body {
background-image: url("csgocarryback.jpg");
background-size: 100%;
margin: 0;
}
而且它不完全是10px。检查以下问题 -
很难说没有看到代码。你能链接到网站或共享一个jsFiddle吗？ – symlink