flash与div层级问题

标签：

今天在工作中用到flash，flash工程师没有给接口调用其点击事件，

在js中无法绑定flash的点击事件，应该是flash默认禁掉了DOM的点击，

自己想在flash包裹层上添加一个兄弟节点div#btn来触发点击事件。

布局如下。

HTML：

<div class="giftBtn">
     <div id="flash_wrap"></div>
     <div id="giftBtn"> </div>
</div>

CSS：

.giftBtn{
    position: relative;
    top: 488px;
    left: 50%;
    margin-left: -212px;
    width: 424px;
    height: 86px;
    cursor: pointer;
    #flash_wrap,#giftBtn{
        position: absolute;
        width: 424px;
        height: 86px;
        z-index: 999;
    }
    #giftBtn{
        position: absolute;
        top:0;
        left: 0;
        z-index:1000;
    }
}

在新版本的一些浏览器中，都可以通过JS来获取#giftBtnDOM对象来绑定其点击事件。可是来到IE7/8/9/10中测试时，出现了问题，始终获取不到该DOM对象，只能获取flash包裹层，加上之前所述的flash包裹层点击事件被flash禁掉的问题，在网上找了一些IE浏览器z-index属性的bug后将父级.giftBtn加上z-index：100。可是没有效果。

依然是flash在最上面一层。崩溃……我没有放弃网上的方法，想着每次要用调试工具去判断#giftBtn是否在最上层，避免麻烦就给该div加了一个background-color：red。意外发生了。

这个div竟然在最上层，看不见flash，点击事件也触发了。

加了颜色的CSS：

.giftBtn{
    position: relative;
    top: 488px;
    left: 50%;
    margin-left: -212px;
    width: 424px;
    height: 86px;
    cursor: pointer;
    z-index:100;
    #flash_wrap,#giftBtn{
            position: absolute;
        width: 424px;
        height: 86px;
        z-index: 999;
    }
    #giftBtn{
        position: absolute;
        top:0;
        left: 0;
        z-index:1000;
        background-color: red;
    }
}

我去掉background-color：red之后问题依然在，Google了一下，找到一篇相关文章，说背景颜色的层级问题，没有太看懂，但是脑子里浮现了一个想法，给#giftBtn加background-color：red，然后时期透明度为0.这样就看不见红色了。

最终的CSS：

.giftBtn{
    position: relative;
    top: 488px;
    left: 50%;
    margin-left: -212px;
    width: 424px;
    height: 86px;
    cursor: pointer;
    z-index:100;
    #flash_wrap,#giftBtn{
            position: absolute;
        width: 424px;
        height: 86px;
        z-index: 999;
    }
    #giftBtn{
        position: absolute;
        top:0;
        left: 0;
        z-index:1000;
        .opacity(0);
        background-color: red;
    }
}

PS：我的css样式是用less编写的。

flash与div层级问题

标签：

原文地址：http://www.cnblogs.com/smallbean/p/4802549.html