我正在为一所学校设计一个网站，我希望网站的标题像 facebook 一样固定。我尝试了 this 提供的修复关于 stackoverflow 的问题，但它在标题中几乎没有任何用处。我有一张图片，基本上是学校的标志，我在那里做 position: fixed，但是
页眉隐藏在页面后面。
HTML:
<body>
<div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>
<div id="menu">
<ul>
<li><a href="index.html"><abbr title="Home">Home </abbr></a></li>
<li><a href="aboutus.html"> <abbr title="About Us">About Us </abbr> </a></li>
<li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li>
<li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li>
<li><a href="news.html"><abbr title="News">News</abbr></a></li>
<li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li>
<li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li>
</ul>
<div class="cleaner"></div>
</div>
CSS:
#header {
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px; color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#menu {
position: relative;
clear: both;
width: auto;
height: 38px;
padding: 0;
padding-left:185px;
background-color:#FFFFFF;
margin-bottom: 10px;
margin-left:0px;
}
#menu ul {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu a {
float: left;
display: block;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
outline: none;
border: none;
border-top: 3px solid black;
}
我尝试了很多解决方案，但无论我做什么，标题都在页面后面。我希望菜单栏也被固定，但它也是一样的......
最佳答案
将 z-index:1000 添加到 #header css，并将 padding-top 添加到 body css，它应该比标题的高度高一点。例如，如果标题的高度是 40px，将 padding-top: 50px 放到 body css 中，它应该可以工作。
关于css - 位置固定时隐藏在内容后面的网站标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10865237/