带有透明 div 的 IE 中的 z-index 问题
Posted
技术标签:
【中文标题】带有透明 div 的 IE 中的 z-index 问题【英文标题】：z-index problem in IE with transparent div 【发布时间】：2011-09-22 18:32:35 【问题描述】：我有一个透明的 div 元素，其 z-index 高于同一页面上的 img 元素。但是 Internet Explorer 在点击事件时表现得好像 img 元素具有更高的 z 值。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" style="position:absolute; left: 100px; top: 100px; z-index:10" />
<div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>
当点击图片时，尽管应该触发 div 元素的点击事件（例如在 Chrome 中工作），但什么也没有发生。
是否有任何解决方法或修复我的问题？
【问题讨论】：
【参考方案1】：这仍然是 IE11 中的错误，但不是 Edge。下面通过创建一个“看起来”透明但有颜色的背景解决了我的问题。
background: rgba(255,255,255,0.0);
如果只希望背景透明而不希望对象的内容透明，则比上面的过滤器解决方案要好一些。
【讨论】：
【参考方案2】：对于 IE，使用透明图像似乎是一种合理的解决方法。这已经在这里回答了：
IE z-index trouble on element with transparent background
【讨论】：
其实，这里的这个帖子比较老，所以还没有回答；）不过……透明图像的技巧真的很好。【参考方案3】：其实你的div“没有任何背景”，
您需要为其设置不透明度=0.01 的彩色背景（例如白色）。
例如：
background:white; filter:alpha(opacity=1);
【讨论】：
background:transparent 没有效果，但使用带有 alpha 过滤器的颜色确实有效，感谢您的建议：background:white;filter:alpha(opacity= 1); height=100% 完美运行。 检查这个答案 - 使用 rgba 设置背景使其也可点击 - ***.com/a/6780462/273488 @ryan: Internet Explorer 8,7,6,... 不支持 rgba，所以这行不通。 仅供参考，将其定位到 IE 8 仅使用以下 hack：background: white\9; filter:alpha(opacity=1)\9;
现在是 2014 年底，标准的人们正在用完全不同的语法重写过滤器（IE 尚不支持），我将使用透明图像解决方案，所以我不未来过滤器语法问题有问题。【参考方案4】：
将 left:0 添加到 div，点击事件可用
在 ie9 中测试
【讨论】：
【参考方案5】：我已经测试了 Preli background:white;filter:alpha(opacity=1) 给出的建议，它工作正常。在 IE 中查看演示：
http://jsfiddle.net/VMrNF/11/
【讨论】：
其实这是我给的 ;) 没错——这个想法来自 valipour——代码是我的。完美的团队合作；）太糟糕了，它需要这样一个（在我看来）丑陋的解决方法才能工作。以上是关于带有透明 div 的 IE 中的 z-index 问题的主要内容，如果未能解决你的问题，请参考以下文章