my div tag is unclickable when there is an IMG tag underneath in ie7 ie8

Let's uncomplicate things

http://jsfiddle.net/Hh7Mn/

<div style="width开发者_开发技巧:100px; height:200px; border:10px solid; cursor:pointer; position:absolute; z-index:99;">dsdsfdsfsdfdsfdsf</div>



<img style="z-index:0;" id="default_image" src="http://www.takeprideinutah.org/wp-content/uploads/2009/04/trees.jpg" alt=""/>

Why is the center of the div unselectable and undetectable in ie?

EDIT:

Sorry the code is now the same on both jsfiddle and stack

---

You need to declare a position when using a z-index.

<img style="z-index:0;position:relative;" id="default_image" src="http://www.takeprideinutah.org/wp-content/uploads/2009/04/trees.jpg" alt=""/>

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

---

change the z-index of the image to -1 and it will work: http://jsfiddle.net/kPtkd/1/

---

I would suggest giving your links a greater z-index value:

a{
z-index:12;
}