在我发布任何问题之前，我受到了一些批评，所以我现在正在尝试格式化一个更好的问题。是的。所以，我正在制作一个网站，并且有一个用于导航的标题。但是，在 CSS 中，我将带有 div class = "header"的 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
如果我不清楚，请添加评论。希望我是。
最佳答案
您应该在 .header 中添加 overflow:hidden
你应该阅读这个 SO post以便更好地解释为什么会这样。
关于html - 我网站上的标题问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38237320/