Link not working in overlapping Div

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!

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

See this question: Z-index broken in IE8?

and this one

IE7 / IE8 z-index problem

Could it be that your first two divs are given postion instead of position attributes? z-index needs non-static positioned divs to work right.

It has to do with the order of the divs. Also if you are putting a link over another div which contains multiple divs, the overlay needs a backround. I usually use a transparent png. Otherwise the browser can see through it (ie7 etc).

Solution to problem: http://jsfiddle.net/Anytech/Gr3ae/1/