|
HTML元素的Z-index属性是如何工作的(2) <input type="text" value="" id=text1 name=text1 ><p> Select
<input type="text" value="" id=text2 name=text2><p> IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1 style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
IFRAME的z-index被设置成一个不变的值5. 当你输入一个比任何元素都大的值的时候DIV元素还是一直在最下面, 因为他是非窗口类的, 其他的元素都会在DIV元素之上. 当你把SELECT元素的z-index值设的比5大的时候, SELECT元素就会在IFRAME之上. 当你把SELECT元素的z-index值设的比5小的时候, 它就会在IFRAME之下了. 当你把SELECT元素的z-index值设为5, IFRAME会在SELECT元素之上, 因为IFRAME是最后的元素, 因此, 它就会比SELECT优先. 如果SELECT元素在IFRAME后面, 那么在z-index值相同的时候, 它就会在IFRAME之上了.
在Internet Explorer 5.5中Z-index是如何工作的
在Internet Explorer 5.5中, z-index 被带到了一个新的水平. IFRAMEs不再是窗口类元素. 更多的相关信息请到以下地址查阅"Windowless IFRAME Elements"标题:
ASP#WindowlessFrames">http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp#WindowlessFrames
这使得SELECT元素变成了唯一的窗口类元素. 如果你在Internet Explorer 5.5中使用前面的代码, 当你把SELECT 元素的z-index值设的比5大的时候, 它会在IFRAME之上. 当你把SELECT 元素的z-index值设的比5小的时候, IFRAME会覆盖SELECT元, 即使他们都是非窗口类元素. 这就是IFRAME的独特性: 它按照z-index顺序和非窗口类元素排列在一起, 并且还可以按照z-index和窗口类元素排列在一起, 比如在这里和SELECT元素一起. 当你把DIV 元素的z-index值设置的比IFRAME大时 (比如6), DIV会覆盖IFRAME. 这符合我们上面的描述: IFRAMEs是非窗口的, 并且它按照z-index的顺序和其他非窗口类元素排列在一起. 当你设的z-index值和IFRAME相等时 (比如5), 它还是会在DIV之上, 这是因为元素的顺序在起作用. 当你把DIV 元素的z-index值设置为6, 同时使SELECT元素和IFRAME的z-index值为5, 那么SELECT元素将会一直在DIV之上, 因为它是窗口类的元素. 然而, IFRAME会在SELECT之上是因为它在顺序上是最后. 为了避免这样, SELECT元素的z-index值必须比IFRAME大, 或者SELECT元素必须排在最后来保证在z-index值一样的情况下它会在IFRAME 之上. Because of this, z-indexing similar content can be difficult. To work around this, use the following methods:
|
