0

上部に浮いたままの静的ヘッダーを作成しようとしています。背景も静的で、

どういうわけか、背景がヘッダーを隠してヘッダーの前に表示されているようです。

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

ここで何か不足していますか？

4

2 に答える 2

0

cssルールとルールに追加z-index: 10;する必要があります。ここで私のフィドルを見ることができます。#headerz-index: 0;#page-background

于 2012-07-03T18:27:43.460 に答える
0

私はに設定しませ#page-backgroundんposition: fixed;

背景画像などを設定できるbackground-attachment: fixed;ので、ヘッダー要素を設定しposition: fixed;ても衝突しません。作業中のページへのリンクなど、もっと作業が必要です。

使用しているアセットがなければ、テスト環境を作成するのは困難です。

また、問題として私が見ているもう1つのことは、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;

于 2012-07-03T18:27:53.120 に答える