Elements won't show, appear to be hidden behind background image?
Can soneone give me a hint as to why my element(id="stuff") won't show?
<!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%;
m开发者_JS百科argin: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>
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Adding the position line to #stuff will fix this.
#stuff{
position:relative;
background: black;
height: 50px;
width: 100px;
z-index: 2;
}
Give it a position other than static:
#stuff{
background: black;
height: 50px;
width: 100px;
z-index: 2;
position:relative;
}
img#background {
z-index: -1;
}
http://jsfiddle.net/b9uUE/3/
To affect the z-index property, you need to use something like absolute on the position of the element. Try adding
position: absolute;
To #stuff
Your background image is absolutely positioned. This means it falls outside the normal flow of the document. Basically you're overriding its position and saying position it here.
Set img#background position:relative and remove the top and left positions.
加载中,请稍侯......
精彩评论