我尝试包装页面并将边距设置为 0 自动，宽度设置为 960px，但没有任何效果。
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: cover;
height: 100%;
}
#everything {
margin: 0 auto;
width: 960px;
}
#huge {
width: 900px;
height: 100%;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 820px;
height: 110px;
border-radius: 70px;
top: 11px;
left: 115px;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 210px;
height: 60px;
border-radius: 30px;
position: fixed;
left: 135px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 215px;
height: 60px;
border-radius: 30px;
z-index: 1;
top: 40px;
left: 140px;
position: fixed;
}
#home-text {
font-family: Comfortaa;
text-align: center;
top: 10px;
left: 145px;
font-size: 30px;
color: #FFFFFF;
}
#clan-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 505px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 512px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 90px;
height: 45px;
border: 2px white solid;
left: 597px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 610px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 712px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 723px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div id="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text"></p>
</div>
<div id="home-div-button"></div>
<div id="clan-div">
<p id="clan-text"></p>
</div>
<div id="clan-div-2">
<p id="clan-text-2"></p>
</div>
<div id="games-div">
<p id="games-text"></p>
</div>
</div>
</div>
</body>
</html>展开代码段，您将看到它是如何向左粘贴的。如果我把位置放在相对位置，那么导航栏不会固定在顶部。
我强烈建议您阅读不同定位类型的确切工作方式，以及它们如何影响儿童。我已经在下面的代码片段中实现了我认为是您想要的行为，主要变化是给出#everything最小高度并使用容器作为背景而不是单独的div。确保将其与您的代码进行比较，如果您有任何问题，请随时发表评论。
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: cover;
height: 100%;
}
#everything {
position: relative;
margin: 0 auto;
width: 960px;
min-height: 100vh;
background-color: rgba(255, 103, 48, 0.5);
}
#huge {
width: 900px;
height: 100%;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar {
position: fixed;
width: 960px;
height: 110px;
background-color: rgba(255,255,255, .2);
border-radius: 70px;
}
#home-div {
background-color: rgb(249, 162, 100);
width: 210px;
height: 60px;
border-radius: 30px;
position: absolute;
left: 135px;
top: 22px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 215px;
height: 60px;
border-radius: 30px;
z-index: 1;
top: 32px;
left: 140px;
position: absolute;
}
#home-text {
font-family: Comfortaa;
text-align: center;
top: 10px;
left: 145px;
font-size: 30px;
color: #FFFFFF;
}
#clan-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 505px;
top: 32px;
position: absolute;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 512px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 90px;
height: 45px;
border: 2px white solid;
left: 597px;
top: 32px;
position: absolute;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 610px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 712px;
top: 32px;
position: absolute;
border-radius: 10px;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 723px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div id="everything">
<div class="navbar">
<div id="home-div">
<p id="home-text"></p>
</div>
<div id="home-div-button"></div>
<div id="clan-div">
<p id="clan-text"></p>
</div>
<div id="clan-div-2">
<p id="clan-text-2"></p>
</div>
<div id="games-div">
<p id="games-text"></p>
</div>
</div>
</div>
</body>
</html>您必须为外部包装元素设置width和position属性以实现中心;以及您的margin: 0 auto;
即。
.pagewrap {
width: 960px;
position: relative;
margin: 0 auto;
height: auto;
}
希望这有帮助！