Z-Index and javascript for rollover
- by Raffaele
I have a container (div) with a background image. In this div there is a menu - a horizontal list. What I need is to insert an image onMouseOver, positioning it absolutely, and showing it behind the text (of course!) AND on top of the div's background image. I also use jQuery, but I think this doesn't matter. The problem can be viewed online. Go to http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex and paste the following text
<html>
<head>
<style type="text/css">
img {
top: 0;
left: 0;
position:absolute;
z-index:-1;
}
#main {
color: red;
margin: 30px;
padding: 20px;
width: 700px;
min-height: 400px;
z-index: -2;
background-image: url("http://www.google.com/logos/mother10-hp.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="main">
<h1>Z-Index question:</h1>
<img src="w3css.gif" width="100" height="140" />
<p>How can we place the green pic between the text and the div#main?</p>
<p>I need the green gif to appear</p>
<ol>
<li>On top of #main's background image</li>
<li>Behind the text</li>
</ol>
</div>
</body>
</html>
