Geek Answers Handbook

Elements not showing, seem to be hidden behind the background image?

Can soneone give me a hint why my element (id = "stuff") will not be displayed?

<!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>
+4
source share
5 answers
 img#background { z-index: -1; }

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

+2
source

Give it a position other than static:

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

z-index only works with positioned elements (position: absolute, position: relative or position: fixed). Adding a line item to the # file will be fixed.

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

To affect the z-index property, you need to use something like absolute at the position of the element. Try to add

 position: absolute;

To #stuff

+2
source

Your background image is absolutely positioned. This means that it goes beyond the normal flow of a document. Basically, you redefine your position and state your position here .

Set img # background position:relative and remove the top and left positions.

-1
source

More articles:


All Articles