Question: I'm trying to get a text link to appear on top of a partly-transparent image, which in turn is on top of a plain coloured background. I want the link-text and image to print when the page is printed, but not the coloured background. (Which is why I'm not using the *background-image* property)

The problem is that although the link appears on top of the image, and the image appears on top of the background as desired, the link cannot be clicked.
It seems to me that if the link appears on top then it should be susceptible to mouse events... 

This happens in at least the following browsers: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) and Internet Explorer 7.

Please would somebody tell me if this is a problem with my HTML/CSS, or with the browsers? 

Here is some HTML to demonstrate the problem:

```
<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

```

Cheers!

Alex

Answer: 
The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign `position:relative` to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.
Two notes:

1) The z-index attribute can only be used on positioned elements (absolute, relative or fixed). Your element is not.

2) *[Edited: Not related]* Your top element (the with z-index: 0) is located inside your background element (the with z-index: -2). 

The following works, you can play with it at: <http://jsfiddle.net/5MpFn/>

```
<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>

```