{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 啃猪蹄的小仙女 的问题《z-index problem in IE with transparent div》','https://www.manongdao.com/q-210802.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a transparent div-element with a higher z-index than an img-element on the same page. But Internet Explorer is acting as if the img-element would have a higher z-value when it comes to click events.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body style="margin:0;padding:0;">
<img src="7player.png" alt="7player" width="60" height="60" 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>
When clicking on the image nothing happens altough the click event of the div-element should be fired (works in Chrome for example).
Is there any workaround or fix for my problem?
This is still a bug in IE11, but not Edge. The following solved my problem by creating a background that "looks" transparent but has a color.
Slightly better that the filter solution above, if you want only the background to be transparent, but not the contents of the object.
I have tested the Suggestion given by Preli
background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:http://jsfiddle.net/VMrNF/11/
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
IE z-index trouble on element with transparent background
add left:0 to div, click event available
tested in ie9
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
For example: