要素は表示されず、背景画像の後ろに隠れて表示されますか？

私の要素（id = "stuff"）がなぜ表示されないのかについて、私は何かのヒントを与えることができますか？要素は表示されず、背景画像の後ろに隠れて表示されますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta content="text/html; charset=ISO-8859-1" 
http-equiv="content-type"> 
<title>blah</title> 
<style type="text/css" media="screen, print, projection"> 

body{  
    width: 100%;  
    height: 100%;  
    margin: 0;  
    padding: 0;  
} 
img#background {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%; 
    margin:0;  
    padding:0; 
} 
#stuff{ 
background: black; 
height: 50px; 
width: 100px; 
z-index: 2; 
} 


</style> 
</head> 
<body> 
<img id="background" src="greenbackground.png" alt="Background Image" /> 
<div id="stuff"><p>stuff</p></div> 



</body> 
</html>

出典

2011-07-08 javi

img#background { 
    z-index: -1; 
}

http://jsfiddle.net/b9uUE/3/

出典

2011-07-08 23:30:59

私はそれが悪い習慣です...私もそれは間違っている理由を理解し、furuteでそれを避けることができるように、すべての主要なブラウザに取り組んで受け入れ答えのためdownwoteは、説明に値するべきだと思いますか？それともそれはより多くの問題/非互換性を引き起こしますか？ –

ボディはZ-インデックス0にあり、バックグラウンドイメージを持っていれば-1がボディの背後に隠れるためです。 – AlienWebguy

また、私の場合は、他の回答と同様に 'position：relative;'を設定する必要がありました –

それを静的以外の位置付け：

#stuff{ 
    background: black; 
    height: 50px; 
    width: 100px; 
    z-index: 2; 
    position:relative; 
}

出典

2011-07-08 23:27:05 AlienWebguy

-1

あなたの背景画像は絶対に配置されているが。これは、文書の通常の流れの外にあることを意味します。基本的にはそのポジションを無効にして、ポジションはここにと言っています。

img＃background position:relativeを設定し、上部と左の位置を削除します。

出典

2011-07-08 23:28:02

z-indexプロパティに影響を与えるには、要素の位置にabsoluteのようなものを使用する必要があります。

position: absolute;

#stuffに

出典

2011-07-08 23:29:12

z屈折率を添加のみ配置要素上で動作（位置：絶対位置：相対、又は位置：固定）を試みます。 #stuffに位置行を追加するとこれが修正されます。

#stuff{ 
position:relative; 
background: black; 
height: 50px; 
width: 100px; 
z-index: 2; 
}

出典

2011-07-08 23:45:48 JBrooks

要素は表示されず、背景画像の後ろに隠れて表示されますか？

答えて

関連する問題