DIV 遮挡有关问题总结

DIV 遮挡问题总结
[size=large]
1、DIV被Silverlight遮挡， 加入windowless参数即可。

<object id=”silverlight” data=”data:application/x-silverlight,” type=”application/x-silverlight-2-b2″ width=”100%” height=”100%” ><param name=”source” value=”ClientBin/YourSilverlight.xap”/><param name=”onerror” value=”onSilverlightError” /><param name=”background” value=”transparent” /><param name=”windowless” value=”true” />

2、DIV被Flash遮挡，加入<param name="wmode" value="transparent" />

<object width="480" height="400" data="你的flash.swf" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /><param name="align" value="middle" /><param name="src" value="你的flash.swf" /><param name="quality" value="high" /></object>

解决方法之一：Iframe包裹select元素
使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！

<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug --> <select name="country"> <option value="1">china</option> <option value="2">japanese</option> <option value="1">U.S.A</option> </select> </iframe>

解决方法之二：以Iframe作为div的子元素，覆盖select元素
建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：

<style>.T_iframe { position: absolute;/*绝对定位保证iframe不会占用流布局空间*/ width: 100%; /*100%保证可以覆盖整个div*/ height: 100%; z-index:-1; /*-1保证iframe显示在div下方*/ } .T_div { position: absolute; left:100px; top:50px; width: 300px; height: 200px; background : blue; z-index:100; } </style> <div name="code"><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script> 或者<script type='text/javascript' src='<%= request.getContextPath()%>/scripts/jquery.bgiframe.js'></script><script type="text/javascript">      $(document).ready(function() {           $('#dialog').bgiframe();                   //dialog是浮动区块div的id.      });</SCRIPT>

或者

<script type="text/javascript">        $(function() {                   $('#dialog'').bgiframe();                });     </SCRIPT>

使用的是Jquery UI dialog的时候，可以利用UI dialog的属性达到这个目的。(这个方法更简单)

$(document).ready(function(){    $('#dialog').dialog({     autoOpen: false,                      height:600,     width: 900,     bgiframe: true ,          //解决下拉框遮盖div的bug     resizable: false,         //dialog的大小不可以改变     draggable:false         //dialog不可以拖动  }); });

[/size]

查看更多 下一篇