Question

有人可以告诉我为什么我的元素（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>

Answer 1

给它一个静态以外的位置：

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

Answer 2

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。将位置线添加到#stuff将解决此问题。

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

Answer 3

要影响z-index属性，您需要在元素的位置使用absolute之类的内容。尝试添加

position: absolute;

至#stuff

Answer 4

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

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

Answer 5

您的背景图片绝对定位。这意味着它超出了文档的正常流程。基本上你是压倒它的位置，并说它在这里。

设置img＃background position:relative并移除左上角和左上角。

元素不会显示，似乎隐藏在背景图像后面？

5 个答案: