我正在为一所学校设计一个网站,我希望像facebook一样修复网站的标题.我在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;
}
我尝试了很多解决方案,但不管我做什么,标题都在页面后面.我希望菜单栏也可以修复,但它也是一样的......
小智 33
将z-index:1000添加到#header css中,并将padding-top添加到body css,它应该比标题的高度多一点.例如,如果标题的高度为40px,则将padding-top:50px放到body css中它应该可以工作.
当你向一个元素添加固定和/或绝对位置时,这意味着该元素将离开自然流,现在它属于"层",该层与所有元素都与文档的自然流动相关的层无关.
这是一个很棒的功能,因为现在您可以将这些元素放在任何位置而不必担心页面的其余部分.
所以,关于你的情况.你选择了正确的位置,固定.现在它上面的元素看不到它,您必须手动将此标题元素的高度添加为边距和/或填充到下一个元素的顶部.
例如,如果您有以下内容:
<div class="header"></div>
<div class="content"></div>
重复你所做的添加一个固定到标题的位置,并考虑到它的高度是50像素,内容元素将得到一个填充顶部:50px,它应该做的伎俩.
<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>