我正在尝试制作一个 float 在顶部的静态 header 。背景也是静态的，
不知何故背景似乎隐藏了标题并显示在标题前面。
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#mainframe{
color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#right{
float:right;
width: 479px;
}
#left{
float:left;
}
#footer{
text-align: right;
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
padding-right: 50px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #F00;
padding-top: 10px;
font-size: 10px;
padding-bottom: 10px;
background-image: url(images/bartrans.png);
text-transform: none;
text-decoration: none;
}
#txt{
clear: both;
width: 900px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
margin-top: 10px;
font-size: 12px;
}
a {
text-decoration: none;
color:#FFF;
}
#header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border: 1px dotted #F00;
margin-top: 20px;
}
#headercontent {
background-color: #F00;
width: 900px;
margin-right: auto;
margin-left: auto;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />
</div>
</div>
<div id="page-background"><img src="images/Music_Equalizer_by_Merlin2525.png" width="100%" height="100%" alt="Smile"></div>
我是不是漏掉了什么？
最佳答案
您只需将 z-index: 10; 添加到 #header CSS 规则并将 z-index: 0; 添加到 #page-background 规则。你可以看到我的 fiddle here .
关于html - 静态背景和静态标题冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11316834/