查了这么多资料,大都很模糊,没有解决控件遮挡问题,说什么z-index之类的,都没说到点子上或者原理性东西,终于查到了这篇博文,发现其中讲解了原理东西,从窗口元素和五窗口元素就行区分就了解了为啥出现遮挡问题了。
说到这个问题,那就要先了解网页上的元素分为几种?
一般来说,分为有窗口元素和无窗口元素,
有窗口 元素大概有以下几种:
<object> 、ActiveX控件 、Plug-ins、DHTML Scriptlets、SELECT elements(即DropdownList的HTML表现)、IE5.01以前的IFRAMEs 。。。
无窗口 元素包括:
无窗口的ActiveX控件(就是控件本身没有任何窗口句柄)、IE5.5以后的IFRAMEs、大部分的DHTML元素 。。。
不管容器怎么设定,所有的有窗口元素都会出现在无窗口的元素之上,有窗口元素和无窗口元素内部自身互相会遵循z-index属性,它们会被绘制在不同的平面上进行显示,设置z-index只能对它们所在的平面起作用,而且有窗口元素的平面始终处于无窗口元素平面之上。
我就将要显示的HTML内容放在一个iframe里面,先将其隐藏,通过一定的条件,再将其显示出来,
HTML:
<div id="flash">
<iframe id="iframecp" src="ifchangepass.jsp"></iframe>
<iframe id="iframely" src="iflayout.jsp"></iframe>
<OBJECT style="position:absolute; left:0px; top:25px;z-index: -1;" ID="TestMfcAtlControl" WIDTH=100% HEIGHT=100% classid="CLSID:DFBE7DAD-463E-40F2-9B05-E9B642EAFC04">
<PARAM NAME="wmode" VALUE="opaque">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="12806">
<PARAM NAME="_ExtentY" VALUE="1747">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
</div>
JS:
function changepass(){
$("#iframecp").css("display","block");
}
function layout(){
$("#iframely").css("display","block");
}