z-index problem in IE with transparent div

2019-01-24 00:51发布

站内文章 / HTML/CSS
28 0 0

问题:

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?

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


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



回答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/



回答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.



回答5:

add left:0 to div, click event available

tested in ie9



标签： html css internet-explorer z-index
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~