我刚刚修复了，感谢你们，当页面大小发生变化时，如何让我的标题与我的内容不重叠。现在，我被告知要将我的导航栏与我的h1标题分组，以便它们可以一起处于固定位置，但是当我这样做时，它会混乱一切。所以现在我希望得到一些帮助，让我的导航栏保持在我的标题下固定位置而不重叠内容。当您在整页中查看我的网站时，可以看到我的想法。您还可以在更改网页大小时查看导航栏是如何搞砸的。
我的第一个网页在此处托管：https://knox-enterprise-inc.herokuapp.com/About.html
这里是我的代码：
<!DOCTYPE html>
<html lang="en-us">
<link rel="stylesheet" href="normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
<a href="index.html">Home</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact</a>
</div>
</header>
<div class="content">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
</html>
的CSS：
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
header {
height: 220px;
}
#about-header{
height: 100px;
}
#contact-header{
height: 100px;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
/*Nav Menu/Home Page*/
.nav {
position: fixed;
top: 78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
/*About Page*/
.about, .about-description {
text-align: center;
color: white;
font-family: helvetica;
letter-spacing: 2px;
}
.about-description {
padding-top:100px;
}
.about-description p {
font-family: helvetica;
letter-spacing: 2px;
margin:0 auto;
width: 40%;
color:white;
}
.about img {
position: relative;
top: 80px;
margin-left:0 auto;
margin-right:0 auto;
padding-top: 30px;
padding-bottom: 30px;
transform: rotate(90deg);
}
#last{
padding-bottom: 40px;
}
.contact {
text-align:center;
padding-top:125px;
color:white;
font-family: helvetica;
letter-spacing: 2px;
}
#phone-contact img{
border-radius:100%;
}
#email-contact img{
border-radius: 30%;
}
答案 0 :(得分：-1)
position: fixed标记位于<h1>标记上而不是标题本身的主要问题。要解决此问题，请先将h1样式的全部改为#about-header：
#about-header {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
接下来，分别删除100px和220px中#about-header和header的预先存在的高度。这些分别设置在style.css的第10行和第7行。
同时删除top: -40px，将font-size降低为0.9em（您可能需要媒体查询来修改不同大小的字体）。
最后，您需要使用z-index，以便您的标题在其滚动的任何内容的顶部上显示：
#about-header {
z-index: 1;
}
您的最终#about-header最终应为：
#about-header {
position: fixed;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url(header.jpg);
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
这会导致子标题附加到桌面和手机的主标题，并且这两个标题将覆盖所有分辨率上的所有其他内容。
希望这有帮助！ ：）