CSS 当位置固定时，网站标题隐藏在内容后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10865237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
website header hiding behind content when position is fixed
提问by thewhitetulip
I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by thisquestion on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do position: fixed, but
the header hides behind the page.
我正在为一所学校设计一个网站，我希望像 facebook 一样修复网站的标题。我在 stackoverflow 上尝试了这个问题提供的修复程序，但它在标题中几乎没有任何用处。我有一个图像，基本上是我所在的学校的标志position: fixed，但标题隐藏在页面后面。
HTML:
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:
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;
}
I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same...
我为此尝试了多种解决方案，但无论我做什么，标题都在页面后面。我希望菜单栏也被修复，但它也是一样的......
回答by vivek
Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header's height. For example, if the header's height is 40px, put the padding-top: 50px to the body css and it should work.
将 z-index:1000 添加到 #header css，并将 padding-top 添加到 body css，它应该比标题的高度高一点。例如，如果标题的高度是 40px，将 padding-top: 50px 放在 body css 上，它应该可以工作。
回答by Vinicius Santana
When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.
当您向元素添加固定和/或绝对位置时，这意味着该元素将离开自然流，现在它属于“层”，与所有元素都与文档的自然流的层无关.
This is a great feature as now you can position those elements anywhere without worring about the rest of the page.
这是一个很棒的功能，因为现在您可以将这些元素放在任何地方，而不必担心页面的其余部分。
So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.
所以，关于你的情况。你选择了正确的位置，固定的。现在它上面的元素看不到它，您必须手动将此标题元素的高度作为边距和/或填充添加到下一个元素的顶部。
For example, if you had the following:
例如，如果您有以下内容：
<div class="header"></div>
<div class="content"></div>
Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.
重复你所做的添加一个固定到标题的位置，并考虑到它的高度是 50 像素，内容元素将获得一个 padding-top:50px 并且它应该可以解决问题。
<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>
回答by Vik
When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don't exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.
当您将 an 元素设置为具有固定定位时，它假定其他相邻元素不存在。给你想要固定的元素一个更大的 z-index。然后为了防止重叠，给固定元素前面的元素与固定元素的高度相同的 padding-top。希望能帮助到你。
回答by thedrs
CSS Z-index might be your solution
CSS Z-index 可能是您的解决方案
回答by shriganth
#header {
margin-top:-38px; //solution
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;
}
