Question

我正在尝试使一个静态标头保持浮动在顶部。背景也是静态的，

某种程度上，背景似乎隐藏了标题并显示在标题前面。

<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>

我在这里错过了什么吗？

Answer 1

您只需将z-index: 10;添加到#header css规则和z-index: 0;到#page-background规则。你可以看到我的小提琴here。

Answer 2

我不会将#page-background设置为position: fixed;

您可以将背景图像或您正在使用的任何内容设置为background-attachment: fixed;，然后，当您将标题元素设置为position: fixed;时，它们不会发生冲突。我希望我们有更多工作，比如您正在处理的页面的链接。

如果没有您正在使用的资产，很难为您创建测试环境。

另外，我认为另一件事是您正在使用DIV元素来设置背景图像。

将背景图像应用于BODY元素，您不必担心任何此类问题。

在这里查看JSFiddle以查看我正在使用的代码：http://jsfiddle.net/mikelegacy/5P7TN/

请注意，我删除了＃page-background ID并使用BODY元素应用背景图片。您不应该使用DIV应用整页背景图像，这不是语义。

以下是您应该如何在编辑器中复制/粘贴它的代码：

<html>
<head>
<style type="text/css">
html, body {
     height:200%; 
     margin:0; 
     padding:0;}
body { 
    background-image: url(images/Music_Equalizer_by_Merlin2525.png); 
    background-attachment: fixed; 
    background-position: 0 0; 
    background-repeat: repeat; }
#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>
    </body>

以下是有关全屏背景图片的文章：http://css-tricks.com/perfect-full-page-background-image/

这里使用的一些方法和IMG标签来设置背景图像。不完全是语义，但对于旧浏览器来说这是一个黑客攻击。如果可以，我建议您只使用background-size: cover;

静态背景和静态标头都存在冲突

2 个答案: