Link not working in overlapping Div

Question

Making a footer for a web site I stumbled upon some strange behavior of overlapping Divs. You can see an example at:

http://mike.latysheva.ru/test.html

The issue is that second link is not clickable in IE7 and at least some versions of IE8. Works fine in IE9 and Firefox.

Here is the code, it is pretty simple (you can see full code in page source):

<div style="height: 120px; width: 200px; background: #DDDDDD; postion:relative;">
  <div style="height: 40px; padding: 10px;postion:relative;">
    <a ...[have to remove an actual link in order to post it here]>Test Link 1</a>
  </div>
  <div style="height: 40px; padding: 10px;postion:relative;">
     <a ...[have to remove an actual link in order to post it here]">Test Link 2</a>
  </div>
</div>
<div style="width:250px;height:100px; background:#777777;margin-top:-60px;position:relative;z-index: -10;"></div>

What can be wrong with the code? Does it have something to do with z-index: -10? I'm totally confused ... Please help ...

Thank you in advance!

Answer 1

Try giving the parent of the z-index:-10 div a z-index:1.