css3 Zインデックスの問題、動作していないのですか？

私はuniプロジェクトに取り組んでおり、いくつかのページの背景を形成するために自分のイメージが必要です。私は、キーロゴ、次と戻るボタン、そしてイメージを持っています。私はこれらの要素すべての背後にイメージを置くことを望みます。私は各要素に相対/絶対とz-インデックスの位置を割り当てました。しかし、画像はまだこれらの他の要素の下にプッシュされています。何かアドバイス？私は私の相対的なCSS/HTMLを見つけて、それを下に置くでしょう。css3 Zインデックスの問題、動作していないのですか？

HTML：

<body> 
<div id="logo"> 
<img src="images/key.jpg" width="3%" height="3%"/> 
</div> 

<div class="next"> 
<a href="scene2.html"> Next</a> 
</div> 

<div class="back"> 
<a href="abduction.html"> Back</a> 
</div> 

<div class="backing"> 
<img src="images/scene1.jpg" width="800" height="800"/> 
</div> 

</body> 
</html>

とCSS：あなたのバッキング要素はあなたの他の要素の後ろに実際にある

#logo { 
    position:relative; 
    z-index:200; 
} 

.backing { 
    position:absolute; 
    z-index:0; 
    float:left; 
} 

.next .back { 
    position:relative; 
    z-index:180; 
}

出典

2012-01-07 Matt Murphy

、それはその下だということだけです。バッキング要素をHTMLドキュメントの最初に置くと、それはページの残りの部分の下にあります。

enter image description here

1つの代替は、bodyタグの背景画像のプロパティを設定する代わりに、あなたのすべての要素のためのzインデックスを設定することになります。

これはまだ実行していない理由はありますか？（あなたが異なる背景を持つ多くのページがある場合はお勧め）あなたはAJAXを使用してページを変更した場合、あなたは

を使用して背景画像を設定することができ、HTMLから

<body style="background-image: url('background1.png')">

をbodyタグの背景を設定するには

document.body.style.backgroundImage = "background1.png";

出典

2012-01-07 15:33:06

私はbodyタグの背景画像を変更した場合、私は、特定の画像を選択したことを意味すること、CSSに思ったので、私はすでにhaventは唯一の理由ですnはすべてのページの背景になります。それは私が望むものではありません。私は、異なるページの異なる背景をコントロールできるようにしたい。これを最善の方法でお勧めできますか？ありがとうございました！ –

ウェブサイトがページごとにリロードされた場合、各ページのスタイル属性に背景イメージを設定するだけで済みます。各ページごとにリロードしない場合は、javascriptを使用して背景イメージを設定することができます。 '' と 'document.body .style.backgroundImage = "background1.png"; ' –

ありがとうございました。 –

css3 Zインデックスの問題、動作していないのですか？

答えて

関連する問題