您的位置：首页 > 其它

flash与div层级问题

2015-09-12 09:07 239 查看

今天在工作中用到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编写的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航