Preli Preli - 1 year ago 91
CSS Question

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?

Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download