DIV中的解决遮挡问题精粹汇总帖

  1. 为什么不发成代码呢——看着多方便啊!
  2. 1.被Flash挡住。 
  3. 设置Flash的wmode属性值 为opaque或transparent,代码示例:
  4. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  5. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" 
  6. height="60"><param name="movie" value="http://pepsi.flash8.net/pepsi46860.swf"> 
  7. <param name="wmode" value="opaque"><param name="quality" value="high"><embed src="http://pepsi.flash8.net/pepsi46860.swf" 
  8. quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" 
  9. height="60" wmode="opaque"></embed></object> 
  10. <div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green"> 
  11. </div> 
  12.     提示:您可以先修改部分代码再运行 关键代码<param name="wmode" value="opaque">
  13. 2.被图片挡住。 
  14. 这个估计是因为图片也放在层中,而图片所在层的Z轴索引值比该层大,所以被挡住,解决办法是更改该层的Z轴索引值至比图片层大。 
  15. 代码示例:
  16. <div style="position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px"> 
  17. 1<img src="http://www.flash8.net/images/logo.gif"> 
  18. </div> 
  19. <div style="position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px"> 
  20. 2<img src="http://www.flash8.net/images/logo.gif"> 
  21. </div> 
  22. <div style="position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px"> 
  23. 3<img src="http://www.flash8.net/images/logo.gif"> 
  24. </div>
  25.     提示:您可以先修改部分代码再运行
  26. 3.被表单控件挡住 
  27. 这个目前还没有完美的解决方法,一般都是在设计排版时就尽量避免这种情况,如果是万不得已,就在层经过表单控件时让表单控件隐藏,过
  28. 后再让它显示。 
  29. 代码示例:
  30. <button onClick="oSelect.style.display=’none’;oLayer.style.display=’inline’">显示层隐藏下拉选项 
  31. </button> 
  32. <button onClick="oSelect.style.display=’inline’;oLayer.style.display=’none’">显示下拉选项隐藏层</button> 
  33. <div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px"> 
  34. z-index:1<select 
  35. id="oSelect"><option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1</select> 
  36. </div> 
  37. <div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px;display:none"> 
  38. z-index:2<img src="http://www.flash8.net/images/logo.gif"> 
  39. </div>
  40.     提示:您可以先修改部分代码再运行
  41. 4.当然还有用优先级别较高的控件来代替层的方法解决,但控件并非是每台机器上都有安装,而且控件的可定制性也差,在兼容性上也存在问
  42. 题。 
  43. (1)hhctrl.ocx控件:
  44. <OBJECT id=hhctrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" 
  45. codebase="<I>file:</I>hhctrl.ocx#Version=4,0,0,24" width=80 height=20> 
  46. <PARAM name="Command" value="Related Topics, MENU"> 
  47. <PARAM name="Button" value="Menu"> 
  48. <PARAM name="Item1" value="[X-Eyes];http://x-lover.com/forums/"> 
  49. <PARAM name="Item2" value="闪客之吧;http://www.flash8.net"> 
  50. <PARAM name="Item3" value="零刻联盟;http://www.linkmeng.com/"> 
  51. <PARAM name="Item4" value="蓝色理想;http://www.blueidea.com/"> 
  52. <PARAM name="Item5" value="5D多媒体;http://www.5d.cn"> 
  53. </OBJECT> 
  54. <select></select><iframe></iframe> 
  55.     提示:您可以先修改部分代码再运行
  56. (2)X-Scriptlet控件
  57. <object style="position:absolute;top:150;left:20;width:100;height:50;border:1px 
  58. solid #000000" type="text/x-scriptlet" data="demo.gif"></object> 
  59. <SELECT></SELECT><iframe></iframe> 
  60.     提示:您可以先修改部分代码再运行
  61. <object style="position:absolute;top:150;left:20;width:100;height:50;border:1px solid #000000" type="text/html" 
  62. data="demo.gif"></object> 
  63. <select></select><iframe></iframe> 
  64.     提示:您可以先修改部分代码再运行
  65. (3) window.createPopup()
  66. <SCRIPT> 
  67. var oPopup = window.createPopup(); 
  68. function showPopupWin(){ 
  69. var oPopBody = oPopup.document.body; 
  70. oPopBody.style.backgroundColor = "green"
  71. oPopup.show(50, 120, 180, 65,document.body); 
  72. </SCRIPT> 
  73. <BUTTON onclick="showPopupWin()">显示窗口</BUTTON><select></select><iframe></iframe>
  74.     提示:您可以先修改部分代码再运行
  75. 注意:用createPopup方法打开的Popup窗口需要IE5.5以上浏览器的支持。 

转自:http://bbs.blueidea.com/thread-2366376-1-1.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值