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

它与div的顺序有关。此外，如果您将链接放在包含多个div的另一个div上，则叠加层需要一个背景。我通常使用透明的png。否则浏览器可以看到它（即7等）。

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

链接无法重叠Div

4 个答案: