【转载】Div被遮住的解决方案

• 来自：http://www.helloajax.com/article/3/308.htm
• 首页
• 论坛
• Web2.0技术
• Asp.net Ajax
• Ajax入门
• Asp.NET 2.0
• Ajax IDE
• Ajax源码
• 搜索

div做的菜单被遮住的解决方案

1.  被Flash挡住 设置Flash的参数：<PARAM name="wmode" value="opaque"><BR><BR>
<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 height=60 width=468 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="12383"><PARAM NAME="_cy" VALUE="1588"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://pepsi.flash8.net/pepsi46860.swf"><PARAM NAME="Src" VALUE="http://pepsi.flash8.net/pepsi46860.swf"><PARAM NAME="WMode" VALUE="Opaque"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false">
<BR><BR>   <BR>  <embed   src="/Files/BeyondPic/2006-2/11/0621123563955772.swf"   quality="high"   pluginspage="http://www.macromedia.com/go/getflashplayer"   type="application/x-shockwave-flash"   width="468"   height="60"></embed></OBJECT><BR></P><BR>
<DIV style="BACKGROUND: green; LEFT: 150px; WIDTH: 100px; POSITION: absolute; TOP: 50px; HEIGHT: 50px"></DIV>或者用<PARAM name="wmode" value="transparent"><BR><BR>
<OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 height=60 width=468 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="12383"><PARAM NAME="_cy" VALUE="1588"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://pepsi.flash8.net/pepsi46860.swf"><PARAM NAME="Src" VALUE="http://pepsi.flash8.net/pepsi46860.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false">
<BR><BR>   <BR>  <embed   src="/Files/BeyondPic/2006-2/11/0621123563955772.swf"   quality="high"   pluginspage="http://www.macromedia.com/go/getflashplayer"   type="application/x-shockwave-flash"   width="468"   height="60"></embed></OBJECT><BR><BR>
<DIV style="BACKGROUND: green; LEFT: 150px; WIDTH: 100px; POSITION: absolute; TOP: 50px; HEIGHT: 50px"></DIV><BR>
<P></P><BR>

2.被图片挡住 这个估计是因为图片也放在层中，而图片所在层的Z轴索引值比该层大，所以被挡住，解决办法是更改该层的Z轴索引值至比图片层大。 <BR></P><BR>
<DIV style="Z-INDEX: 2; BACKGROUND: red; LEFT: 0px; WIDTH: 120px; POSITION: absolute; TOP: 20px; HEIGHT: 70px">1<IMG src="/Files/BeyondPic/2006-2/11/0621123575645815.gif"> </DIV><BR><BR>
<DIV style="Z-INDEX: 2; BACKGROUND: green; LEFT: 50px; WIDTH: 120px; POSITION: absolute; TOP: 50px; HEIGHT: 70px">2<IMG src="/Files/BeyondPic/2006-2/11/0621123575645815.gif"> </DIV><BR><BR>
<DIV style="Z-INDEX: 2; BACKGROUND: blue; LEFT: 90px; WIDTH: 120px; POSITION: absolute; TOP: 80px; HEIGHT: 70px">3<IMG src="/Files/BeyondPic/2006-2/11/0621123575645815.gif"> </DIV><BR>
<P></P><BR>
<P></P>

3.被表单控件挡住 这个目前还没有完美的解决方法，一般都是在设计排版时就尽量避免这种情况，如果是万不得已，就在层经过表单控件时让表单控件隐藏，过后再让它显示：<BUTTON onclick="oSelect.style.display='none';oLayer.style.display='inline'">显示层隐藏下拉选项</BUTTON><BUTTON onclick="oSelect.style.display='inline';oLayer.style.display='none'">显示下拉选项隐藏层</BUTTON> <BR></P><BR>
<DIV style="Z-INDEX: 2; BACKGROUND: red; LEFT: 0px; WIDTH: 120px; POSITION: absolute; TOP: 50px; HEIGHT: 50px">z-index:1<SELECT id=oSelect></SELECT> </DIV><BR><BR>
<DIV id=oLayer style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: green; LEFT: 30px; WIDTH: 120px; POSITION: absolute; TOP: 60px; HEIGHT: 70px">z-index:2<IMG src="/Files/BeyondPic/2006-2/11/0621123575645815.gif"> </DIV>当然还有用优先级别较高的控件来代替层的方法解决，但控件并非是每台机器上都有安装，而且控件的可定制性也差，也就是常说的兼容性问题： hhctrl.ocx<BR><BR>
<OBJECT id=hhctrl codeBase="<I>file:</I>hhctrl.ocx#Version=4,0,0,24" type=application/x-oleobject height=20 width=80 classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11><PARAM NAME="Width" VALUE="2117"><PARAM NAME="Height" VALUE="529"><PARAM NAME="Command" VALUE="">
<BR><BR>                                   5D多媒体</a>;http://www.5d.cn">   <BR>  </OBJECT><SELECT></SELECT> window.createPopup()窗口(需要IE5.5+支持)<BR><BR>
<SCRIPT>   <BR>  var   oPopup   =   window.createPopup();   <BR>  function   showPopupWin(){   <BR>  var   oPopBody   =   oPopup.document.body;   <BR>  oPopBody.style.backgroundColor   =   "green";   <BR>  oPopup.show(50,   120,   180,   65,document.body);   <BR>  }   <BR>  </SCRIPT>
<BR><BR><BUTTON onclick=showPopupWin()>Click Me!</BUTTON><SELECT></SELECT> <IFRAME src="index.asp"></IFRAME><BR>
<P></P>
<P></P>