控件分为有窗口控件与无窗口控件,无窗口控件很好办,如flash控件,可以通过添加wmode属性来解决挡住DIV层这个问题,添加的代码如下:
解决无窗口控件挡住DIV:
1
|
<param name= "wmode" value= "opaque" >
|
这种情况在使用DIV的网页里的测试如下:

测试的代码是:
测试DIV与OCX控件:
1
2
3
4
5
6
7
8
9
10
11
12
|
<div
style= "position: absolute; left: 120; top: 450; width: 400px; height: 200px; background: red; z-index: 7" >
<object classid= "CLSID:4B5BEE59-EDD2-4082-A9F7-D65E1CA20FA7" width= "100" height= "100" >
</object>
是第6层
</div>
<div
style= "position: absolute; left: 40; top: 500; width: 400px; height: 100px; background: Blue; z-index: 9" >
这是第7层
</div>
这是第7层
</div>
|
这种情况在EXTJS下边的测试情况如下图:

注:如果我们的控件是一个无窗口控件如flash控件,可以通过添加wmode属性来解决挡住DIV层这个问题,添加的代码如下:
1
|
<param name= "wmode" value= "opaque" >
|
Html的iframe、frame可以挡住OCX控件——实际上iframe以及frame本身是一个有窗口元素,有窗口元素之间是可以互相遮挡的,而我们的Div又可以与iframe窗口互相遮挡。 现在的问题变成了如何先用iframe挡住OCX窗口再用DIV挡住iframe。
用iframe遮挡OCX控件
1
2
3
4
5
6
7
8
9
10
11
12
|
<div
style= "position: absolute; left: 120; top: 450; width: 400px; height: 200px; background: red; z-index: 7" >
<object classid= "CLSID:4B5BEE59-EDD2-4082-A9F7-D65E1CA20FA7" width= "100" height= "100" >
</object>
是第6层
</div>
<div
style= "position: absolute; left: 40; top: 500; width: 400px; height: 100px; background: Blue; z-index: 9" >
<iframe id= 'iframei' src= "javascript:false" style= "position:absolute; visibility:inherit; top:0px; left:0px; height:'100%';width:'100%'; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';/" >
</iframe>;
这是第7层
</div>
|
其中代码:
1
2
3
|
<iframe id= 'iframei' src= "javascript:false" style= "position:absolute; visibility:inherit;
top:0px; left:0px; height:'100%';width:'100%'; z-index:-1;
filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';/" ></iframe>;”
|
就是创建一个与DIV等大的,透明的iframe框架。实现的效果如下图:
