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

Solution 1:

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

Solution 2:

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

Solution 3:

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/

Solution 4:

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.

Solution 5:

add left:0 to div, click event available

tested in ie9