z-index problem in IE with transparent div

Question

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

Answer 1

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/

Answer 2

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

Answer 3

add left:0 to div, click event available

tested in ie9

Answer 4

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

Answer 5

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.