在我发布任何问题之前，我受到一些批评，所以我现在正在尝试格式化一个更好的问题。是啊。所以，我正在制作一个网站，我有一个导航标题。但是，在CSS中，我将带有div class =“header”的标题放到color：black;中。我不知道为什么背景不是黑色而且不存在。我做了一个jsfiddle。正如您在jsfiddle上看到的那样，标题不存在，当您向下滚动时，如您所见，标题不是白色。有谁知道如何使标题固定，或者层次结构中是否存在不一致？
.header {
position:relative;
top:-20px;
left:0px;
width:100%;
background-color:#000000;
border-left: 5px solid white;
}
.header ul li a {
color: black;
position: fixed;
top: 13px;
font-weight: bold;
text-decoration: none;
//background: #000000;
}
ul {
list-style-type: none;
}
a#strawpoll {
right: 215px;
}
a#previousblogs {
right: 95px;
}
a#aboutme {
right: 15px;
}
h1 {
text-align: left;
position: fixed;
left: 10px;
top: -10px;
color: black;
}
body {
position: relative;
top: 60px;
font-family: 'Raleway', sans-serif;
background-image:
//url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
background-size: cover;
color: white;
text-align: center;
color: black;
}
a:link {
color: black;
text-decoration: none;
}
.header a:hover {
text-decoration: underline;
}
a:visited {
color: black;
text-decoration: none;
}<title>My Blog</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="blog.css">
<link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<body>
<div class="header">
<div class = "navbar">
<ul>
<li><a id = "strawpoll" href ="#"> Strawpoll </a></li>
<li><a id = "previousblogs" href ="#"> Previous Blogs </a></li>
<li><a id = "aboutme" href ="#"> About Me </a></li>
</ul>
</div>
<script src="app.js"></script>
<h1><a href ="#">My Life</a></h1>
</div>
<p>
texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff.
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p>
</p><p>
bopbopbopbopbopbopbob
</p>
sapodksadksa
daa
</p>
以下是jsfiddle
如果我不清楚，请在评论中添加。希望我是。
答案 0 :(得分：0)
您应该在.header上添加overflow：hidden
您应该阅读此SO post，以便更好地解释其原因。
答案 1 :(得分：0)
您的CSS需要进行调整，我也认为.header已在jquery.menu.css中使用，因此我更改为.header1
以下是一个工作示例。不确定这是否是你想要的。
.header1 {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #000000;
border-left: 5px solid white;
height: 100px;
}
.header1 ul {
float: right;
margin-right: 20px;
list-style-type: none;
margin-top: 5px;
}
.header1 ul > li {
display: inline-block !important;
margin-right: 10px;
}
.header1 ul > li > a {
font-weight: bold;
}
.header1 > h1 {
text-align: left;
margin-left: 20px;
}
.content {
margin-top: 105px;
}
body {
position: relative;
top: 60px;
font-family: 'Raleway', sans-serif;
//background-image: url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
background-size: cover;
color: white;
text-align: center;
color: black;
}
a:link {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #cccccc;
text-decoration: none;
}<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<div class="header1">
<ul>
<li><a id="strawpoll" href="#"> Strawpoll </a>
</li>
<li><a id="previousblogs" href="#"> Previous Blogs </a>
</li>
<li><a id="aboutme" href="#"> About Me </a>
</li>
</ul>
<h1><a href ="#">My Life</a></h1>
</div>
<p class="content">
texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff.
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p>
</p>
<p>
bopbopbopbopbopbopbob
</p>
sapodksadksa daa
</p>
答案 2 :(得分：0)
<html>
<title>My Blog</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="blog.css">
<link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<style>
body{
margin: 0;
padding: 0;
}
.header{
width: 100%;
position: relative;
}
.navbar{
background: #000;
width: 100%;
overflow: hidden;
position: fixed;
top:0;
}
.navbar h1{
float: left;
padding-left: 20px;
}
.navbar h1 a{
color: #fff;
text-decoration: none;
}
.navbar ul{
float: right;
line-height: 45px;
padding-right: 20px;
}
.navbar ul li{
display: inline-block;
}
.navbar ul li a{
color: #fff;
padding: 0 10px;
text-decoration: none;
}
.content{
width: 100%;
float: left;
margin-top: 100px;
}
</style>
<body>
<div class="header">
<div class="navbar">
<h1><a href ="#">My Life</a></h1>
<ul>
<li><a id="strawpoll" href="#"> Strawpoll </a></li>
<li><a id="previousblogs" href="#"> Previous Blogs </a></li>
<li><a id="aboutme" href="#"> About Me </a></li>
</ul>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus totam ipsum laudantium laborum doloremque doloribus quas incidunt unde reprehenderit at, modi cum repellendus accusantium ea corrupti, magni ut provident dicta!Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</body>
</html>