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

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.

For example:

 background:white; filter:alpha(opacity=1);

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

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.

background: rgba(255,255,255,0.0);

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

Need Your Help

Redis connection to failed - connect ECONNREFUSED

javascript node.js session express redis

I working with node.js by expressjs I try to store an account to session. So, i try to test to use session with code in expressjs

Postgresql LEFT JOIN json_agg() ignore/remove NULL

sql json postgresql postgresql-9.3

SELECT C.id, C.name, json_agg(E) AS emails FROM contacts C