链接不重叠Div

Question

为网站制作页脚我偶然发现了重叠Div的一些奇怪行为。您可以看到一个例子：

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

的问题是，第二个环节是不是在IE7点击并且至少一些IE8的版本。在IE9和Firefox中运行良好。

下面是代码，这是很简单的（你可以看到完整的代码在页面的源代码）：

<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> 

有什么可以用错误的代码？它与z-index有什么关系：-10？我完全困惑...请帮助...

先谢谢您！

Answer 1

尝试给予的z-index的父：-10 DIV的z-index：1。

Answer 2

看到这个问题：Z-index broken in IE8?

而这一次

IE7/IE8 z-index problem

Answer 3

难道说你的前两个div是postion而不是position属性？ z-index需要非静态定位div才能正常工作。

Answer 4

它与divs的顺序有关。此外，如果您将链接放在另一个包含多个div的div上，则该覆盖需要一个背景。我通常使用透明PNG。否则，浏览器可以看穿它（ie7等）。

问题的解决方案： http://jsfiddle.net/Anytech/Gr3ae/1/