Html 需要导航停留在标题下方，固定，没有内容重叠
多亏了你们，我最近刚刚修复了如何在页面大小改变时使标题不与内容重叠的问题。现在，我被告知将导航栏与h1标题组合在一起，以便它们可以一起处于固定位置，但当我这样做时，会把一切都搞砸。所以现在我希望得到一些帮助，使我的导航栏保持在标题下方的固定位置，而不重叠内容。当你查看我的网站时，你可以看到，在一个完整的页面中，我是如何想要它的。你还可以看到当你改变网页的大小时导航栏是如何变得混乱的 我的第一个网页位于此处： 第二，这是我在本页的代码：Html 需要导航停留在标题下方，固定，没有内容重叠,html,css,Html,Css,多亏了你们，我最近刚刚修复了如何在页面大小改变时使标题不与内容重叠的问题。现在，我被告知将导航栏与h1标题组合在一起，以便它们可以一起处于固定位置，但当我这样做时，会把一切都搞砸。所以现在我希望得到一些帮助，使我的导航栏保持在标题下方的固定位置，而不重叠内容。当你查看我的网站时，你可以看到，在一个完整的页面中，我是如何想要它的。你还可以看到当你改变网页的大小时导航栏是如何变得混乱的 我的第一个网页位于此处： 第二，这是我在本页的代码： <!DOCTYPE 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>
您的
位置：修复的主要问题在于
标签上，而不是标题本身。要纠正此问题，请首先将h1
样式设置的全部改为#关于标题
：
#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;
}
接下来，分别删除#about header
和header
中预先存在的100px和220px的高度。它们分别设置在style.css
的第10行和第7行
同时删除top:-40px
，并将字体大小降低到0.9em
（您可能需要媒体查询以不同大小修改该字体）
最后，您需要使用，以便您的标题显示在其滚动的任何内容的顶部
#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;
}
这将导致子标题“附加”到台式机和手机的主标题，并且两个标题将重叠所有分辨率上的所有其他内容
希望这有帮助！：） 我投票结束这个问题，因为提供的标记是非常无效的，任何让它工作的东西都是纯粹的黑客或运气。我补充了代码，因为我不想全部发布，因为它与问题无关。我已经修改了它来显示所有的代码。好吧，我的问题是两个部分，所以你解决了一个部分，但我还需要解决另一个问题，所以我编辑了页面来指定这个问题。我会马上把它标记为已解决。你问题的第二部分是什么？据我所知，你只是在问如何让固定标题不与页面内容重叠？我已经回答了如何做到这一点（所以我不知道为什么这个答案应该被否决），我很乐意帮助解决您可能遇到的任何其他问题，但您需要明确说明问题的具体内容。如果您查看我的网站，给定链接，当您缩小网页时，导航栏会移动并与标题重叠。当你从一个完整的窗口看我的网站时，你可以看到导航栏的位置，就在标题下面。我正试图找到一种方法，当网页窗口大小发生变化时，让它保持不变。我没有否决你的答案，我认为是另一个人。我已经修正了我的答案以涵盖响应性：）
#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;
}