链接在重叠的 Div 中不起作用
在为网站制作页脚时，我偶然发现了重叠 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 有关系吗？我完全困惑了......请帮忙......
提前谢谢你！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试为 z-index:-10 div 的父级指定 z-index:1。
Try giving the parent of the z-index:-10 div a z-index:1.
请参阅此问题：Z-index bad in IE8?
和这个
IE7 / IE8 z 索引问题
See this question: Z-index broken in IE8?
and this one
IE7 / IE8 z-index problem
难道你的前两个 div 被赋予了
postion而不是position属性？z-index需要非静态定位的 div 才能正常工作。Could it be that your first two divs are given
postioninstead ofpositionattributes?z-indexneeds non-static positioned divs to work right.这与 div 的顺序有关。此外，如果您将链接放在另一个包含多个 div 的 div 上，则覆盖层需要背景。我通常使用透明png。否则浏览器可以看穿它（ie7等）。
问题解决：
http://jsfiddle.net/Anytech/Gr3ae/1/
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/