z-index problem in IE with transparent div
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?
In fact, your div "Doesn't have any background",
You need to give it a color background (e.g. white) with opacity=0.01.
Using a transparent image seems like a reasonable work-around for IE. This was answered already here:
I have tested the Suggestion given by Preli background:white;filter:alpha(opacity=1), and it is working fine. See the Demo in IE:
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.
add left:0 to div, click event available
tested in ie9