ansaurus

Question

Z-Index and javascript for rollover

Answer 1

+3 A:

It seems you need position:relative;, absolute or fixed on a div for the z-index to take effect.

Jim Blackler 2010-04-13 09:58:53

Thank you. It solved my problem

Raffaele 2010-04-13 11:08:38

Glad I could help.

Jim Blackler 2010-04-13 12:26:14

Answer 2

+2 A:

Quoting the W3C:

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Yuval A 2010-04-13 10:00:54

You're right. I forgot it!! Thanks

Raffaele 2010-04-13 11:09:25

Answer 3

A:

I made this work for your example. Hope it helps.

<html>
<head>
  <style type="text/css">
    .img1 {
      top: 0;
      left: 0;
      position:absolute;
      z-index:2;
    }

    #wrapper {
      background-image: url("http://www.google.com/logos/mother10-hp.gif");
      background-repeat: no-repeat;
z-index:1;
width:600px;
height:600px;

    }

    #main {
      color: red;
      margin: 30px;
      padding: 20px;
      width: 700px;
      min-height: 400px;
      z-index: 3;
position:absolute;
    }
  </style>
</head>

<body>

<div id="wrapper">
    <div class="img1">
<img src="w3css.gif" width="100" height="140" />
    </div>
  <div id="main">
    <h1>Z-Index question:</h1>
    <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>
</div>
</body>

</html>

You can only use z-index on positioned elements, here the wrapper is not positioned, yet it is sandwiched between the two divs. As I said, this works for the example posted, and isn't 100% accurate, you will have to add positioning for your other elements in your project. :)

Kyle Sevenoaks 2010-04-13 10:03:02

Thanks, this definetly solves my problem

Raffaele 2010-04-13 11:09:08

No problem, happy to help.

Kyle Sevenoaks 2010-04-13 12:49:03

ansaurus

tags:

views:

answers:

Z-Index and javascript for rollover

related questions